GDPR: Lock で同意を記録する

このチュートリアルでは、Lock を使用して同意情報を取得し、その内容をユーザーのメタデータに保存する方法を説明します。詳しくは、ユーザープロファイルにおけるメタデータの仕組みを参照してください。カスタム UI を使用して同意を記録する場合は、GDPR: Custom UI で同意を記録するを参照してください。このドキュメントの内容は法的助言を目的としたものではなく、また、法的支援に代わるものでもありません。GDPR を理解し、遵守する最終的な責任はお客様にありますが、Auth0 は可能な限り GDPR 要件への対応を支援します。

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

概要

シンプルな JavaScript シングルページアプリケーションとデータベース接続を構成します (独自のデータベースを設定する代わりに、Auth0 のインフラストラクチャを使用します) 。アプリを一から構築する代わりに、Auth0 の JavaScript Quickstart サンプルを使用します。また、アプリにログイン機能を埋め込む代わりに、Auth0 のページも使用し、Universal Login エクスペリエンスを実装します。Universal Login の詳細については、Auth0 Universal Loginを参照してください。Universal Login と埋め込みログインの違いの詳細については、Centralized Universal Login vs. Embedded Loginを参照してください。さまざまなシナリオで同意情報を取得し、これをユーザーのメタデータに保存します。すべてのシナリオで、ユーザーのメタデータに次のプロパティを保存します。

consentGiven プロパティ。値は true/false で、ユーザーが同意したかどうかを示します (true は同意済み、false は未同意)
consentTimestamp プロパティ。ユーザーが同意した時点の Unix タイムスタンプを保持します

例:

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

これについては、次の 3 つの実装方法を見ていきます。

利用規約やプライバシーポリシーの内容を確認できる別ページへのリンクを表示するもの
サインアップウィジェットにカスタムフィールドを追加するもので、データベース接続で利用できるもの
ユーザーが同意を行える別ページにリダイレクトするもので、ソーシャル接続で利用できるもの

アプリケーションを設定する

Auth0 Dashboard > Applications > Applications に移動し、新しいアプリケーションを作成します。タイプとして Single Web Page Applications を選択します。
Settings に移動し、Allowed Callback URLs を http://localhost:3000 に設定します。このフィールドには、ユーザーの認証後に Auth0 がリダイレクトを許可する URL の一覧を指定します。サンプルアプリは http://localhost:3000 で実行されるため、この値を設定します。
Client ID と ドメイン の値をコピーします。これらは後ほど必要になります。
Auth0 Dashboard > Authentication > Database に移動し、新しい接続を作成します。Create DB Connection をクリックし、新しい接続の名前を設定して、Save をクリックします。Auth0 Dashboard > Authentication > Social でソーシャル接続を有効にすることもできます (このチュートリアルでは Google ログインを有効にします) 。
接続の Applications タブに移動し、新しく作成したアプリケーションが有効になっていることを確認します。
JavaScript SPA サンプルをダウンロード。

オプション 1: 利用規約へのリンクを表示する

このセクションでは、ログインウィジェットをカスタマイズして、ユーザーがサインアップ時にチェックを必須とするフラグを追加します。このフラグのラベルには、利用規約とプライバシーポリシーを表示するページへのリンクが含まれます。これは、データベース接続とソーシャルログインの両方で機能します。

Auth0 Dashboard > Branding > Universal Login に移動します。
Login ビューを選択し、Customize Login Page トグルを有効にします。
Default Templates ドロップダウンを見つけて、Lock を選択します。コードブロックにはあらかじめコードが入力されています。
consentGiven メタデータ用のフィールドを追加するには、mustAcceptTerms オプションを使用します。利用規約ページやプライバシーポリシーページへのリンクを含めるには、languageDictionary オプションを使用します。詳細は、Lock Configuration Options を参照してください。以下の例では、フラグの横に I agree to the terms of service and privacy policy というテキスト (両方のページへのリンクを含む) を表示します。
```
//code reducted for simplicity
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        //code reducted for simplicity
      },
      languageDictionary: {
        signUpTerms: "I agree to the <a href='https://my-app-url.com/terms' target='_blank'>terms of service</a> and <a href='https://my-app-url.com/privacy' target='_blank'>privacy policy</a>."
      },
      mustAcceptTerms: true,
      //code reducted for simplicity
    });
```
表示を確認するには、Preview ビューを選択し、Lock が読み込まれたら Sign Up を選択します。
このフラグにより、ユーザーはサインアップ前に規約への同意を求められますが、メタデータは設定されません。ユーザーの選択を consentGiven メタデータプロパティに保存するには、新しい Action を作成します。Action にわかりやすい名前 (たとえば Set consent flag upon signup) を入力し、Login フローに Action を追加するため Login / Post Login トリガーを選択してから、Create を選択します。

次の画面は Actions のコードエディタです。以下の JavaScript コードをコピーして貼り付け、Save Draft を選択して変更を保存します。

exports.onExecutePostLogin = async (event, api) => {
  const { consentGiven } = event.user.user_metadata || {};

  // short-circuit if the user signed up already
  if ( consentGiven ) {
    return;
  }

  // first time login/signup
  api.user.setUserMetadata("consentGiven", true);
  api.user.setUserMetadata("consentTimestamp", Date.now());
  return;
}

このコードは、consentGiven メタデータがまだ設定されていない場合 (つまり、サインアップ後の初回ログイン時) に、その値を true に設定します。

Actions Code Editor のサイドバーで Test (再生アイコン) を選択し、Run を選択してコードをテストします。
Action を公開する準備ができたら、Deploy を選択します。

最後に、作成した Action を Login Flow に追加します。Actions を Flows にアタッチする方法については、Write Your First Action の「Attach the Action to a flow」セクションを参照してください。

オプション 2: データベース接続用のカスタムフィールドを追加する

このセクションでは、データ処理への同意をユーザーがチェックできるよう、ログインウィジェットをカスタマイズしてフラグを追加します。これはデータベース接続でのみ機能します (ソーシャルログインを使用している場合は、次の段落を参照してください) 。

Auth0 Dashboard > Branding > Universal Login に移動します。
Login ビューを選択し、Customize Login Page トグルを有効にします。
Default Templates ドロップダウンを見つけて、Lock を選択します。コードブロックにはあらかじめ内容が入力されています。

consentGiven メタデータ用のフィールドを追加するには、additionalSignUpFields オプションを使用します。詳細については、Lock Configuration Options を参照してください。次の例では、type を checkbox (フラグとして機能) に、ラベルを I consent to data processing に、デフォルト値を checked に設定しています。

//簡略化のためコードを省略
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      auth: {
        //簡略化のためコードを省略
      },
      additionalSignUpFields: [{
        type: "checkbox",
        name: "consentGiven",
        prefill: "true",
        placeholder: "I consent to data processing"
      }],
      //簡略化のためコードを省略
    });

実際の表示を確認するには、Preview ビューを選択し、Lock が読み込まれたら Sign Up を選択します。

このオプションでは、設定しているのはフラグだけで、タイムスタンプは設定していない点に注意してください。現在時刻をログインウィジェットに表示するのは適切ではないため、追加のサインアップフィールドは追加していません。代わりに、consentGiven の値を確認し、追加の consentTimestamp メタデータに現在のタイムスタンプを設定するルールを使用して、バックグラウンドでタイムスタンプを設定してください。

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

ソーシャルログインを使用している場合、カスタムフィールドを追加することはできません。その代わり、同意や追加情報を求める別のページにユーザーをリダイレクトし、その後元のフローに戻して認証トランザクションを完了できます。これは Redirect Actions で実現できます。詳しくは、Redirect with Actions を参照してください。この Action を使って、同意情報をユーザーのメタデータに保存することもできます。これにより、この情報を追跡でき、次回ログイン時に再度同意を求めずに済みます。ここでは簡単のため、サンプルの同意フォームを使用します。このフォームはどこかでホストする必要があり、その URL は公開アクセス可能でなければなりません。ステップ 2 では、このフォームにアクセスできる URL を Auth0 に指定する必要があります。特別な同意プロンプト (たとえば保護者の同意) が必要な場合は、独自のカスタム同意フォームを作成する必要があります。法律は国によって異なるため、その点に注意してください。

新しい Action を作成します。Action にわかりやすい名前 (たとえば Redirect to consent form) を入力し、Action を Login フローに追加するため、トリガーとして Login / Post Login を選択してから、Create を選択します。
Actions Code Editor を開き、サイドバーの Secrets (鍵) アイコンを選択します。キーと値のペアを作成し、同意フォームの URL を Secret として追加します。
- Key: CONSENT_FORM_URL
- Value: your-consent-form-url.com (同意フォームにアクセスできる公開 URL を必ず指定してください。)

次の JavaScript コードを Actions Code Editor にコピーし、変更を保存するために Save Draft を選択します。

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

Actions Code Editor のサイドバーで Test (再生アイコン) を選択し、次に Run を選択してコードをテストします。
Action を本番環境で有効にする準備ができたら、Deploy を選択します。

最後に、作成した Action を Login Flow に追加します。Actions を Flow にアタッチする方法については、Write Your First Action の「Attach the Action to a flow」セクションを参照してください。本番環境で使用する同意フォームへのリダイレクトを設定する際は、セキュリティ上の考慮事項として、Trusted Callback URLs と Data Integrity を必ず確認してください。これで設定は完了です。テストしてみましょう。

設定をテストする

アプリケーションをダウンロードしたフォルダーに移動し、実行します。
```
npm install
    npm run
```
http://localhost:3000 にアクセスします。Login をクリックします。Lock が表示されたら、Sign Up をクリックします。ログインページはデフォルトで YOUR_DOMAIN/login に表示されます。独自のドメインの使用方法については、Custom Domains を参照してください。
最初の実装オプションに従った場合は、利用規約とプライバシーポリシーへの同意用チェックボックスが表示されます。なお、このチェックボックスをオンにするまで、Sign up ボタンは無効のままです。リンクをたどって、正しく動作することを確認してください。メールアドレスとパスワードを入力し、規約に同意して Sign Up をクリックします。あるいは、ソーシャル接続を使用する場合は、規約に同意して Sign Up with Google を選択します。
2 番目の実装オプションに従った場合は、追加した新しいカスタムフィールドが表示されます。メールアドレスとパスワードを入力し、I consent to data processing チェックボックスはオンのままにします。Sign Up をクリックします。
3 番目の実装オプションに従った場合は、Sign Up with Google を選択します。同意フォームに移動するので、I agree チェックボックスをオンにして Submit をクリックします。 Submit をクリックする前に I agree チェックボックスをオンにしないと、Unauthorized. Check the console for details. というポップアップエラーが表示されます。コンソールには次の JSON が表示されます。
```
{
      error: "unauthorized", 
      errorDescription: "User did not consent!", 
      state: "q0GjMwzZN_q5r8XPHvfakkMYcYM2q1N3"
    }
```
なお、ユーザーは作成されますが、ログインはできません。ログインしようとすると、再度同意を求められます。
Auth0 Dashboard > User Management > Users に移動し、新しいユーザーを検索します。
User Details に移動し、Metadata セクションまでスクロールします。user_metadata テキストエリアには、次の内容が表示されます。
```
{
      "consentGiven": "true"
      "consentTimestamp": "1525101183"
    }
```

以上で完了です。

​概要

​アプリケーションを設定する

​オプション 1: 利用規約 へのリンクを表示する

​オプション 2: データベース接続用のカスタムフィールドを追加する

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

​設定をテストする

概要

アプリケーションを設定する

オプション 1: 利用規約へのリンクを表示する

オプション 2: データベース接続用のカスタムフィールドを追加する

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

設定をテストする