> ## Documentation Index > Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. > Lock をカスタマイズして同意情報を取得する方法を説明します # GDPR: Lock で同意を追跡する このチュートリアルでは、Lock を使用して同意情報を取得し、その入力内容をユーザーのメタデータに保存する方法を説明します。詳しくは、[ユーザープロファイルでメタデータがどのように機能するかを理解する](/docs/ja-jp/manage-users/user-accounts/metadata)をご覧ください。 カスタム UI を使用して同意を追跡したい場合は、[GDPR: Custom UI で同意を追跡する](/docs/ja-jp/secure/data-privacy-and-compliance/gdpr/gdpr-track-consent-with-custom-ui)をご覧ください。 このドキュメントの内容は、**法的助言を目的としたものではなく**、また法的支援に代わるものでもありません。GDPR を理解し、遵守する最終的な責任はお客様にありますが、Auth0 は可能な範囲で GDPR 要件への対応を支援します。 これらのドキュメントの内容は、法的助言を目的としたものではなく、また法的支援に代わるものでもありません。GDPR を理解し、遵守する最終的な責任はお客様にありますが、Auth0 は可能な範囲で GDPR 要件への対応を支援します。
## 概要
シンプルな JavaScript のシングルページアプリケーションとデータベース接続を設定します (独自のデータベースを用意する代わりに、Auth0 のインフラストラクチャを使用します) 。 アプリケーションを最初から構築する代わりに、[Auth0 の JavaScript Quickstart サンプル](/docs/ja-jp/quickstart/spa/vanillajs)を使用します。また、アプリケーションにログインを埋め込む代わりに、Universal Login エクスペリエンスを実装できるよう、Auth0 の Universal Login ページも使用します。Universal Login の詳細については、[Auth0 Universal Login](/docs/ja-jp/authenticate/login/auth0-universal-login)を参照してください。Universal Login と埋め込みログインの違いについては、[Centralized Universal Login vs. Embedded Login](/docs/ja-jp/authenticate/login/universal-vs-embedded-login)を参照してください。 さまざまなシナリオで同意に関する情報を取得し、これをユーザーのメタデータに保存します。 すべてのシナリオで、次のプロパティをユーザーのメタデータに保存します。 * `consentGiven` プロパティ。値は true/false で、ユーザーが同意した場合は true、していない場合は false を示します * `consentTimestamp` プロパティ。ユーザーが同意した日時の Unix タイムスタンプを保持します 例: ```json lines theme={null} { "consentGiven": "true" "consentTimestamp": "1525101183" } ``` これには、次の3つの実装方法があります。 * 利用規約やプライバシーポリシーの内容を確認できる別ページへのリンクを表示するもの * サインアップウィジェットにカスタムフィールドを追加するもので、データベース接続で利用できるもの * ユーザーが同意を行える別ページにリダイレクトするもので、ソーシャル接続で利用できるもの
## アプリケーションを設定する
1. [Auth0 Dashboard > Applications > Applications](https://manage.auth0.com/#/applications) に移動し、新しい アプリケーションを作成します。種類には `Single Web Page Applications` を選択します。 2. **設定** に移動し、**Allowed Callback URLs** に `http://localhost:3000` を設定します。 この項目には、ユーザーの認証後に Auth0 がリダイレクトできる URL の一覧を指定します。サンプルアプリは `http://localhost:3000` で実行されるため、この値を設定します。 3. **Client Id** と **Domain** の値をコピーします。これらは後で使用します。 4. [Auth0 Dashboard > Authentication > Database](https://manage.auth0.com/#/connections/database) に移動し、新しい接続を作成します。**Create DB Connection** をクリックし、新しい接続名を設定してから、**Save** をクリックします。また、[Auth0 Dashboard > Authentication > Social](https://manage.auth0.com/#/connections/social) でソーシャル接続を有効にすることもできます (このチュートリアルでは Google ログインを有効にします) 。 5. 接続の **アプリケーション** タブに移動し、新しく作成したアプリケーションが有効になっていることを確認します。 6. [JavaScript SPA サンプルをダウンロード](/docs/ja-jp/quickstart/spa/vanillajs)。 このセクションでは、ユーザーがサインアップ時にチェックする必要がある項目を追加するために、ログインウィジェットをカスタマイズします。この項目のラベルには、Terms & Conditions とプライバシーポリシーを表示するページへのリンクが含まれます。 これはデータベース接続とソーシャルログインの両方で機能します。 1. [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/login_page) に移動します。 2. **Login** ビューを選択し、**Customize Login Page** トグルを有効にします。 3. **Default Templates** ドロップダウンを見つけて、`Lock` を選択します。コードブロックにはあらかじめ内容が入力されています。 4. `consentGiven` メタデータ用のフィールドを追加するには、`mustAcceptTerms` オプションを使用します。Terms & Conditions ページやプライバシーポリシーページへのリンクを含めるには、`languageDictionary` オプションを使用します。詳しくは、[Lock Configuration Options](/docs/ja-jp/libraries/lock/lock-configuration) を参照してください。以下の例では、チェック項目の横に `I agree to the terms of service and privacy policy` という文言 (両方のページへのリンクを含む) を表示します。 ```javascript lines theme={null} //簡潔にするため一部のコードを省略 var lock = new Auth0Lock(config.clientID, config.auth0Domain, { auth: { //簡潔にするため一部のコードを省略 }, languageDictionary: { signUpTerms: "I agree to the terms of service and privacy policy." }, mustAcceptTerms: true, //簡潔にするため一部のコードを省略 }); ``` 実際の表示を確認するには、**Preview** ビューを選択し、Lock が読み込まれたら **Sign Up** を選択します。 5. このチェック項目により、ユーザーはサインアップ前に規約へ同意する必要がありますが、メタデータは設定されません。ユーザーの選択を `consentGiven` メタデータプロパティに保存するには、[新しい Action を作成](/docs/ja-jp/customize/actions/write-your-first-action) します。Action にわかりやすい **Name** (たとえば `Set consent flag upon signup`) を入力し、Action をログインフローに追加するため `Login / Post Login` トリガーを選択してから、**Create** を選択します。 6. 次の画面は Actions Code Editor です。以下の JavaScript コードをそこにコピーし、**Save Draft** を選択して変更を保存します。 ```text lines theme={null} exports.onExecutePostLogin = async (event, api) => { const { consentGiven } = event.user.user_metadata || {}; // ユーザーがすでにサインアップ済みなら早期終了 if ( consentGiven ) { return; } // 初回のログイン/サインアップ api.user.setUserMetadata("consentGiven", true); api.user.setUserMetadata("consentTimestamp", Date.now()); return; } ``` このコードは、`consentGiven` メタデータがまだ設定されていない場合に `true` を設定します (つまり、サインアップ後の初回ログインであることを意味します) 。 7. Actions Code Editor のサイドバーから Test (再生アイコン) を選択し、**Run** を選択して[コードをテスト](/docs/ja-jp/customize/actions/test-actions)します。 8. Action を本番環境で有効にする準備ができたら、**Deploy** を選択します。 最後に、作成した Action を [ログインフロー](https://manage.auth0.com/#/actions/flows/login/) に追加します。Actions を Flows に関連付ける方法については、[Write Your First Action](/docs/ja-jp/customize/actions/write-your-first-action) の「Attach the Action to a flow」セクションを参照してください。
## オプション 2: データベース接続にカスタムフィールドを追加する
このセクションでは、ログインウィジェットをカスタマイズして、ユーザーが自身の情報の処理に同意する場合にチェックを入れるフラグを追加します。 これはデータベース接続でのみ機能します (ソーシャルログインを使用している場合は、次の段落を参照してください) 。 1. [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/login_page) に移動します。 2. **Login** ビューを選択し、**Customize Login Page** トグルを有効にします。 3. **Default Templates** ドロップダウンを見つけて、`Lock` を選択します。コードブロックにはあらかじめ内容が入力されます。 4. `consentGiven` メタデータ用のフィールドを追加するには、`additionalSignUpFields` オプションを使用します。詳しくは、[Lock Configuration Options](/docs/ja-jp/libraries/lock/lock-configuration) を参照してください。以下の例では、type を `checkbox` (フラグとして使うため) に、label を `I consent to data processing` に、デフォルト値を `checked` に設定しています。 ```javascript lines theme={null} //簡略化のためにコードを一部省略 var lock = new Auth0Lock(config.clientID, config.auth0Domain, { auth: { //簡略化のためにコードを一部省略 }, additionalSignUpFields: [{ type: "checkbox", name: "consentGiven", prefill: "true", placeholder: "I consent to data processing" }], //簡略化のためにコードを一部省略 }); ``` 5. 実際の表示を確認するには、**Preview** ビューを選択し、Lock の読み込み後に **Sign Up** を選択します。 このオプションでは、フラグのみを設定し、タイムスタンプは設定しない点に注意してください。ログインウィジェットに現在時刻を表示するのは適切ではないため、追加のサインアップフィールドは加えていません。代わりに、`consentGiven` の値を確認し、追加の `consentTimestamp` メタデータに現在のタイムスタンプを設定するルールを使って、バックグラウンドでタイムスタンプを設定してください。
## オプション 3: 別のページにリダイレクトする
ソーシャルログインを使用している場合、カスタムフィールドを追加することはできません。その代わり、ユーザーを別のページにリダイレクトして、そこで同意や追加情報の入力を求めた後、元にリダイレクトして認証トランザクションを完了できます。これは Redirect Actions を使って実現できます。詳しくは、[Redirect with Actions](/docs/ja-jp/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/redirect-with-actions)を参照してください。この同じ Action を使って、ユーザーのメタデータに同意情報を保存し、この情報を追跡して次回のログイン時には同意を求めないようにします。 簡単のため、[サンプルの同意フォーム](https://github.com/auth0/rules/blob/master/redirect-rules/simple/webtask.js#L31)を使用します。このフォームはどこかでホストする必要があり、その URL は公開アクセス可能でなければなりません。ステップ 2 で、フォームにアクセスできる URL を Auth0 に指定する必要があります。特別な同意プロンプト (たとえば保護者の同意) が必要な場合は、独自のカスタム同意フォームを作成する必要があります。法律は国によって異なるため、その点にも注意してください。 1. [新しい Action を作成](/docs/ja-jp/customize/actions/write-your-first-action)します。Action にわかりやすい **Name** を入力し (たとえば `Redirect to consent form`) 、Action をログインフローに追加するため `Login / Post Login` トリガーを選択してから、**Create** を選択します。 2. Actions Code Editor を開き、サイドバーの **Secrets** (キー) アイコンを選択します。キーと値のペアを作成し、同意フォームの URL を Secret として追加します。 * **Key**: `CONSENT_FORM_URL` * **Value**: `your-consent-form-url.com` (同意フォームにアクセスできる公開 URL を必ず指定してください。) 3. 次の JavaScript コードを Actions Code Editor にコピーし、**Save Draft** を選択して変更を保存します。 ```text lines theme={null} exports.onExecutePostLogin = async (event, api) => { const { consentGiven } = event.user.user_metadata || {}; // ユーザーがまだ同意していない場合は同意フォームにリダイレクトする if (!consentGiven && api.redirect.canRedirect()) { const options = { query: { auth0_domain: `${event.tenant.id}.auth0.com`, }, }; api.redirect.sendUserTo(event.secrets.CONSENT_FORM_URL, options); } }; // ユーザーが同意フォームで「I agree」をクリックした場合は、再度表示されないようプロファイルに保存する exports.onContinuePostLogin = async (event, api) => { if (event.request.body.confirm === "yes") { api.user.setUserMetadata("consentGiven", true); api.user.setUserMetadata("consentTimestamp", Date.now()); return; } else { return api.access.deny("User did not consent"); } }; ``` 4. Actions Code Editor のサイドバーで Test (再生アイコン) を選択し、**Run** を選択して[コードをテスト](/docs/ja-jp/customize/actions/test-actions)します。 5. Action を有効化する準備ができたら、**Deploy** を選択します。 最後に、作成した Action を [ログインフロー](https://manage.auth0.com/#/actions/flows/login/) に追加します。Actions を Flows に関連付ける方法については、[Write Your First Action](/docs/ja-jp/customize/actions/write-your-first-action) の「Attach the Action to a flow」セクションを参照してください。 本番環境で使用する同意フォームへのリダイレクトを設定する際は、セキュリティ上の注意点として [Trusted Callback URLs](https://github.com/auth0/rules/tree/master/redirect-rules/simple#trusted-callback-urls) と [Data Integrity](https://github.com/auth0/rules/tree/master/redirect-rules/simple#data-integrity) を必ず確認してください。 これで設定は完了です。テストしてみましょう！
## 設定をテストする
1. アプリケーションをダウンロードしたフォルダーに移動し、実行します。 ```text lines theme={null} npm install npm run ``` 2. `http://localhost:3000` にアクセスします。**Login** をクリックします。Lock が表示されたら、**Sign Up** をクリックします。 ログインページは、デフォルトでは `YOUR_DOMAIN/login` で提供されます。独自のドメインを使用する方法については、[カスタムドメイン](/docs/ja-jp/customize/custom-domains) を参照してください。 3. 1 つ目の実装オプションに従った場合は、利用規約とプライバシーポリシーへの同意用フラグが表示されます。このフラグをチェックするまで、**Sign up** ボタンは無効のままであることに注意してください。リンクをたどって、正しく機能することを確認してください。メールアドレスとパスワードを設定し、規約に同意して **Sign Up** をクリックします。あるいは、ソーシャル接続を使用する場合は、規約に同意して **Sign Up with Google** を選択します。 4. 2 つ目の実装オプションに従った場合は、追加した新しいカスタムフィールドが表示されます。メールアドレスとパスワードを設定し、`I consent to data processing` フラグはチェックしたままにします。**Sign Up** をクリックします。 5. 3 つ目の実装オプションに従った場合は、**Sign Up with Google** を選択します。同意フォームに移動するので、**I agree** フラグをチェックして **Submit** をクリックします。 **I agree** フラグをチェックせずに **Submit** をクリックすると、`Unauthorized. Check the console for details.` というポップアップエラーが表示されます。コンソールには次の JSON が表示されます。 ```json lines theme={null} { error: "unauthorized", errorDescription: "User did not consent!", state: "q0GjMwzZN_q5r8XPHvfakkMYcYM2q1N3" } ``` なお、ユーザーは作成されますが、ログインすることはできません。ログインしようとすると、再度同意を求められます。 6. [Auth0 Dashboard > User Management > Users](https://manage.auth0.com/#/users) に移動し、新しいユーザーを検索します。 7. **User Details** に移動し、**メタデータ** セクションまでスクロールします。**user\_metadata** テキストエリアには、次の内容が表示されるはずです。 ```json lines theme={null} { "consentGiven": "true" "consentTimestamp": "1525101183" } ``` 以上で完了です。