GDPR: カスタム UI で同意を記録する

ログインに独自のカスタム UI を使用する場合に、auth0.js または Auth0 API を使用して同意情報を記録する方法を説明します。

このチュートリアルでは、auth0.js または Auth0 API を使用して同意に関する情報を取得し、その入力内容をユーザーの メタデータ に保存する方法を説明します。詳細については、ユーザープロファイルにおける Metadata の仕組みを理解するを参照してください。

Lock を使用して同意を追跡する場合は、GDPR: Lock で同意を追跡するを参照してください。

このドキュメントの内容は、法的助言を意図したものではなく、法的支援に代わるものでもありません。GDPR を理解し、遵守する最終的な責任はお客様にありますが、Auth0 は可能な範囲で GDPR 要件への対応を支援します。

これらのドキュメントの内容は、法的助言を意図したものではなく、法的支援に代わるものでもありません。GDPR を理解し、遵守する最終的な責任はお客様にありますが、Auth0 は可能な範囲で GDPR 要件への対応を支援します。

​

概要

さまざまなシナリオで同意情報を取得し、ユーザーのメタデータに保存します。

すべてのシナリオで、以下のプロパティがユーザーのメタデータに保存されます。

• consentGiven (true/false) は、ユーザーが同意したかどうかを示します (true は同意済み、false は未同意)
• consentTimestamp (Unix timestamp) は、ユーザーが同意した日時を示します

たとえば、次のようになります。

{
  "consentGiven": "true"
  "consentTimestamp": "1525101183"
}

これには、次の 4 通りの実装があります。

1. フラグを表示し、データベース接続に対応し、auth0.js ライブラリを使用してユーザーを作成するもの (Single-Page Applications で使用) 。詳細については、Auth0.js v9 Reference を参照してください。
2. フラグを表示し、データベース接続に対応し、Authentication API を使用してユーザーを作成するもの (Regular Web Apps で使用)
3. フラグを表示し、ソーシャル接続に対応し、Management API を使用してユーザー情報を更新するもの (SPA または Regular Web Apps で使用)
4. 利用規約および/またはプライバシーポリシーの情報を確認し、同意情報を提供できる別のページにリダイレクトするもの (SPA または Regular Web Apps で使用)

​

オプション 1: auth0.js を使用する

このセクションでは、シンプルなシングルページアプリケーションを使用し、ユーザーが同意情報を提供できるよう、ログインウィジェットをカスタマイズしてフラグを追加します。アプリを最初から構築する代わりに、Auth0 の JavaScript Quickstart サンプルを使用します。また、アプリにログインを埋め込むのではなく Universal Login を実装するために、Auth0 の Universal Login ページも使用します。Universal Login の詳細については、Auth0 Universal Loginを参照してください。Universal Login と埋め込みログインの違いについては、Centralized Universal Login vs. Embedded Loginを参照してください。

これはデータベース接続でのみ機能します (独自のデータベースをセットアップする代わりに、Auth0 のインフラストラクチャを使用します) 。

1. Auth0 Dashboard > Applications > Applications に移動し、新しいアプリケーションを作成します。種類として Single Web Page Applications を選択します。Settings に移動し、Allowed Callback URLs を http://localhost:3000 に設定します。

   このフィールドには、ユーザーの認証後に Auth0 がリダイレクトできる URL の一覧を設定します。サンプルアプリは http://localhost:3000 で実行されるため、この値を設定します。

2. クライアントID と ドメイン の値をコピーします。あとで必要になります。

3. Auth0 Dashboard > Authentication > Database に移動し、新しい接続を作成します。Create DB Connection をクリックし、新しい接続の名前を設定して Save をクリックします。接続の Applications タブに移動し、新しく作成したアプリケーションが有効になっていることを確認します。

4. JavaScript SPA Sample をダウンロードします。

5. クライアントID と ドメインの値を設定します。

6. Auth0 Dashboard > Branding > Universal Login に移動します。Login タブでトグルを有効にします。

7. Default Templates ドロップダウンで、Custom Login Form が選択されていることを確認します。コードはあらかじめ入力されています。

8. databaseConnection 変数の値を、アプリで使用しているデータベース接続の名前に設定します。

   //簡潔にするためコードを一部省略
   	var databaseConnection = 'test-db';
   	//簡潔にするためコードを一部省略
   

9. consentGiven メタデータ用のフィールドを追加するには、フォームにチェックボックスを追加します。この例では、チェックボックスをデフォルトでオンかつ無効に設定し、ユーザーがチェックを外せないようにしています。必要に応じて、ビジネス要件に合わせて調整してください。

   //簡潔にするためコードを一部省略
       <div class="form-group">
         <label for="name">I consent with data processing</label>
         <input
           type="checkbox"
           id="userConsent"
           checked disabled>
       </div>
       //簡潔にするためコードを一部省略
   

10. サインアップ関数を編集してメタデータを設定します。ここでは、メタデータの値をブール値ではなく、値 true を持つ文字列として設定しています。また、数値を文字列に変換するために toString を使用している点にも注意してください。これは、値として文字列しか受け付けない Authentication API の Signup エンドポイント の制限によるものです。

    //簡潔にするためコードを一部省略
        webAuth.redirect.signupAndLogin({
          connection: databaseConnection,
          email: email,
          password: password,
          user_metadata: { consentGiven: 'true', consentTimestamp: Date.now().toString() }
        }, function(err) {
          if (err) displayError(err);
        });
        //簡潔にするためコードを一部省略
    

11. ログインウィジェットの表示を確認するには、Preview タブをクリックします。

1. この設定をテストするには、アプリケーションを実行し、http://localhost:3000 にアクセスします。新しいユーザーでサインアップしてください。次に、Auth0 Dashboard > User Management > Users に移動して、その新しいユーザーを検索します。User Details に移動し、Metadata セクションまでスクロールします。user_metadata のテキストエリアに、consentGiven メタデータが true に設定されていることを確認できます。

​

オプション 2: API を使用する (データベース)

ログインページを独自のサーバーで提供している場合は、ユーザーがサインアップした後に Authentication API の Signup エンドポイント を直接呼び出すことができます。

ここまで説明してきたのと同じシナリオでは、新しいユーザーがサインアップした後、次のスニペットを使用して Auth0 にユーザーを作成し、メタデータを設定できます。consentTimestamp リクエストパラメーターの値は、ユーザーが同意した時点のタイムスタンプに置き換えてください。

メタデータ の値は、ブール値ではなく、値が true の文字列として設定している点に注意してください。これは、API では値としてブール値ではなく文字列のみを受け付けるという制約があるためです。

ブール値を設定する必要がある場合は、代わりに Management API を使用できます。この場合は、通常どおりユーザーをサインアップさせた後、Management API の Update User エンドポイント を呼び出して、ユーザーの作成後に必要な メタデータ を設定します。詳しい手順については、このまま読み進めてください。次の段落では、このエンドポイントを使用します。

​

オプション 3: API を使用する (ソーシャル)

ソーシャル接続を使用している場合、そのエンドポイントはデータベース接続でしか使えないため、Authentication API を使用して Auth0 にユーザーを作成することはできません。

代わりに、ユーザーをソーシャルプロバイダー経由でサインアップさせてください (これにより Auth0 にユーザーレコードが作成されます) 。その後、Management API を使用してユーザー情報を更新します。

Management API を呼び出す前に、有効なトークンを取得する必要があります。詳しくは、本番環境向けの Management API アクセストークンを取得するを参照してください。

リンク先の記事では、トークンの取得に Client Credentials Flow を使用していますが、これはブラウザー上で実行されるアプリでは使用できません。代わりに、Implicit Flow を使用できます。Client Credentials Flow の詳細については、Client Credentials Flowを参照してください。Implicit Flow の詳細については、Implicit Flowを参照してください。

リクエストパラメーターの audience を https://YOUR_DOMAIN/api/v2/ に設定し、scope パラメーターをスコープ create:current_user_metadata に設定します。レスポンスで取得した アクセストークン を使って、Management API の Update User エンドポイント を呼び出すことができます。

有効なトークンを取得したら、次のスニペットを使用してユーザーのメタデータを更新します。

この呼び出しを行うには、一意の user_id を把握しておく必要がある点に注意してください。レスポンスから取得している場合は、IDトークンの sub クレームからこれを取得できます。詳しくは、ID Tokens を参照してください。あるいは、メールアドレスしかわからない場合は、Management API の別のエンドポイントを呼び出して id を取得できます。詳しくは、User Search Best Practices を参照してください。

​

オプション 4: 別のページにリダイレクトする

ユーザーに追加の情報を表示したい場合は、サインアップ時に別のページへリダイレクトして、そこで同意や追加情報を求めた後、認証トランザクションを完了するために再度リダイレクトで戻すことができます。これはリダイレクト用の Rules で実現できます。同じルールを使って同意情報をユーザーのメタデータに保存しておけば、その情報を記録でき、次回のログイン時に再度同意を求めずに済みます。詳細は、Redirect Users from Within Rules を参照してください。

このフォームはご自身でホストする必要があり、その URL はインターネットからアクセス可能でなければなりません。このチュートリアルの後続の手順で、このフォームの URL を Auth0 に指定する必要があります。

1. リダイレクト用の Rules を追加します。Auth0 Dashboard > Auth Pipeline > Rules に移動し、Create Rule をクリックします。Rules Templates で、empty rule を選択します。デフォルトのルール名 empty rule を、内容が分かる名前 (例: Redirect to consent form) に変更します。

2. 次の JavaScript コードをスクリプトエディターに追加し、変更を Save します。

   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");
     }
   };
   

3. Auth0 Dashboard > Auth0 Pipeline > Rules に戻り、ページ下部の Settings セクションまでスクロールします。次のようにキーと値のペアを作成します。

   1. Key: CONSENT_FORM_URL
   2. Value: your-consent-form-url.com

同意フォームにアクセスできる公開 URL を必ず指定してください。

本番環境で使用する同意フォームへのリダイレクトを設定する際は、セキュリティ上の懸念について Trusted Callback URLs と Data Integrity を必ず確認してください。

たとえば保護者の同意など、特別な同意プロンプトが必要な場合は、独自のカスタム同意フォームを作成する必要があります。法律は国によって異なる点に注意してください。

設定はこれで完了です。テストしてみましょう。

​

設定をテストする

1. アプリケーションを実行し、https://localhost:3000 にアクセスします。
2. 新しいユーザーでサインアップします。すると、同意フォームにリダイレクトされます。
3. I agree チェックボックスを選択し、Submit をクリックします。
4. Auth0 Dashboard > User Management > Users に移動し、新しいユーザーを検索します。
5. User Details に移動し、Metadata セクションまでスクロールします。
6. user_metadata テキストエリアで、consentGiven メタデータが true に設定され、consentTimestamp がユーザーが同意した時点の Unix タイムスタンプに設定されていることを確認します。

以上で完了です。