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

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

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

代わりに 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 ライブラリを使ってユーザーを作成する実装です (シングルページアプリケーションで使用) 。詳しくは、Auth0.js 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 > アプリケーション > アプリケーションに移動し、新しいアプリケーションを作成します。タイプとしてSingle Web Page Applicationsを選択します。Settingsに移動し、Allowed Callback URLsをhttp://localhost:3000に設定します。

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

2. Client IdとDomainの値をコピーします。これらは後ほど必要になります。

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

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

5. Client ID と Domain の値を設定します。

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">データ処理に同意します</label>
         <input
           type="checkbox"
           id="userConsent"
           checked disabled>
       </div>
       //簡潔にするため一部のコードを省略
   

10. メタデータを設定するように signup 関数を編集します。メタデータの値には、ブール値ではなくtrueという値を持つ文字列を設定しており、数値を文字列に変換するためにtoStringを使用している点に注意してください。これは、値として文字列しか受け付けない Authentication API のSignup endpointの制約によるものです。

    //簡潔にするため一部のコードを省略
        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 を開き、メタデータ セクションまでスクロールします。user_metadata のテキストエリアに、consentGiven メタデータが true に設定されていることが表示されるはずです。

​

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

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

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

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

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

​

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

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

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

Management API を呼び出す前に、有効なトークンを取得する必要があります。詳しくは、Get Management API Access Tokens for Production を参照してください。

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

audience リクエストパラメータを https://YOUR_DOMAIN/api/v2/ に設定し、scope パラメータを scope create:current_user_metadata に設定します。レスポンスで取得した Access Token を使って、Management API の Update User endpoint を呼び出せます。

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

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

​

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

ユーザーにさらに詳しい情報を表示したい場合は、Signup 時に別のページへリダイレクトして、そこで同意や追加情報の入力を求めたうえで、元のフローに戻して認証トランザクションを完了させることができます。これはリダイレクト ルールで実現できます。また、同じルールを使ってユーザーのメタデータに同意情報を保存しておけば、この情報を記録でき、次回のログイン時に再度同意を求めずに済みます。詳しくは、ルール内からユーザーをリダイレクトするを参照してください。

このフォームはどこかでホストする必要があり、その URL は公開アクセス可能でなければなりません。このチュートリアルの後の手順で、フォームにアクセスできる URL を Auth0 に指定する必要があります。

1. リダイレクト ルールを追加します。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 に戻り、ページ下部の 設定 セクションまでスクロールします。次のようにキーと値の組を作成します。

   1. キー: CONSENT_FORM_URL
   2. 値: your-consent-form-url.com

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

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

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

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

​

設定をテストする

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

以上で完了です。