メール アクションで状態を渡す

パスワードの再設定や、ユーザーのメールアドレスを確認する目的でメール アクションを送信するときに、続行 URL を使用して状態を渡すことができます。これにより、ユーザーはアクションの完了後にアプリに戻れるようになります。また、モバイルアプリがインストールされている場合に、ウェブページではなくモバイルアプリからメール アクション リンクが直接処理されるようにデベロッパー側で指定することも可能です。

この動作は、以下のようなよくある状況では非常に役立ちます。

  • 現在ログインしていないユーザーがログインの必要なコンテンツにアクセスしようとしているが、パスワードを忘れたため、パスワードを再設定するフローをトリガーする場合。ユーザーはこのフローの終了後、元々アクセスしようとしていたアプリのセクションに戻ることを期待します。

  • 確認済みのアカウントにしかアクセスを許可しないアプリの場合。たとえば、ニュースレターの登録では、ユーザーにメールアドレスの確認を求めます。ユーザーはメール確認フローを処理した後に、アプリに戻って登録を完了できることを期待します。

  • その他、ユーザーがモバイル デバイスからフローを開始した場合。ユーザーはフローの確認後、ブラウザではなくモバイルアプリに戻ることを期待します。

続行 URL を使用して状態を受け渡せる Firebase Auth の強力な機能により、ユーザー エクスペリエンスを大幅に向上させることができます。

メール アクションで状態 / 続行 URL を渡す

続行 URL を安全に渡すには、URL のドメインが Firebase コンソールでホワイトリストに登録されている必要があります。それには、[Authentication] セクションで、[ログイン方法] タブの下にある [承認済みドメイン] のリストにこのドメインを追加します(まだ存在しない場合)。

パスワードの再設定メールまたは確認メールを送信する際は、firebase.auth.ActionCodeSettings インスタンスを指定する必要があります。このインターフェースでは、次のパラメータを指定できます。

パラメータ 説明
url 文字列

コンテキストによって異なる意味を持つリンク(状態 / 続行 URL)を設定します。

  • リンクがウェブ アクション ウィジェットで処理される場合、これは continueUrl クエリ パラメータのディープリンクを表します。
  • リンクがアプリ内で直接処理される場合、これはダイナミック リンクのディープリンク内の continueUrl クエリ パラメータを表します。
iOS ({bundleId: string}|undefined) iOS バンドル ID を設定します。これにより、iOS アプリがインストールされている場合に、そのアプリでリンクを開くことを試みます。iOS アプリはコンソールに登録されている必要があります。
android ({packageName: string, installApp:boolean|undefined, minimumVersion: string|undefined}|undefined) Android パッケージ名を設定します。これにより、Android アプリがインストールされている場合に、そのアプリでリンクを開くことを試みます。端末でサポートされている Android アプリがまだインストールされていない状態で installApp が渡された場合は、その値によってそのアプリをインストールするかを決定します。packageName を指定せずにこのフィールドが渡された場合、「このフィールドの packageName を指定する必要があります」という内容のエラーがスローされます。minimumVersion が指定され、古いバージョンのアプリがインストールされている場合、ユーザーは Play ストアにリダイレクトされ、アプリのアップグレードを促されます。Android アプリはコンソールに登録されている必要があります。
handleCodeInApp (boolean|undefined) メール アクション リンクがモバイルアプリとウェブリンクのどちらで最初に開かれるかを示します。デフォルトは false です。true に設定すると、アクション コード リンクはユニバーサル リンクまたは Android アプリリンクとして送信され、アプリがインストールされている場合はそのアプリで開かれます。false の場合、コードは最初にウェブ ウィジェットに送信され、続いてアプリがインストールされている場合はそのアプリにリダイレクトされます。
dynamicLinkDomain (string|undefined) Firebase Dynamic Links を使用してリンクを開く場合は、現在のリンクに使用するダイナミック リンク ドメイン(またはサブドメイン)を設定します。プロジェクトごとに複数のダイナミック リンク ドメインを構成できるため、このフィールドでドメインを明示的に選択できます。指定しない場合、デフォルトで最初のドメインが使用されます。

次の例は、カスタム動的リンクドメイン example.page.link を使用して、モバイルアプリで最初に Firebase Dynamic Links として開かれるメール確認リンクを送信する方法を示しています(iOS アプリ com.example.ios、または Android アプリ com.example.android がまだインストールされていない場合はインストールされます。最小バージョンは 12 です)。ディープリンクには、続行 URL ペイロード https://www.example.com/?email=user@example.com が含まれています。

var actionCodeSettings = {
  url: 'https://www.example.com/?email=' + firebase.auth().currentUser.email,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  handleCodeInApp: true,
  // When multiple custom dynamic link domains are defined, specify which
  // one to use.
  dynamicLinkDomain: "example.page.link"
};
firebase.auth().currentUser.sendEmailVerification(actionCodeSettings)
  .then(function() {
    // Verification email sent.
  })
  .catch(function(error) {
    // Error occurred. Inspect error.code.
  });

Firebase Auth では、モバイルアプリで開かれるリンクを送信するときに Firebase Dynamic Links が使用されます。この機能を使用するには、Firebase コンソールで Dynamic Links を構成する必要があります。

  1. Firebase Dynamic Links を有効にします。

    1. Firebase コンソールで [Dynamic Links] セクションを開きます。
    2. Dynamic Links の利用規約にまだ同意しておらず、また Dynamic Links のドメインをまだ作成していない場合は、この時点でその作業を行います。

      Dynamic Links のドメインが作成済みである場合は、それをメモしておきます。Dynamic Links のドメインは、通常、次の例のようになります。

      example.page.link

      受信リンクをインターセプトするように iOS アプリまたは Android アプリを構成するときに、この値が必要になります。

  2. Android アプリを構成します。

    1. Android アプリでこれらのリンクを処理する予定の場合は、Firebase コンソールのプロジェクト設定で Android パッケージ名を指定する必要があります。さらに、アプリ証明書の SHA-1 および SHA-256 を指定する必要があります。
    2. AndroidManifest.xml ファイルで、ディープリンクのインテント フィルタを構成する必要があります。
    3. 詳しくは、Android Dynamic Links の受信の手順をご覧ください。
  3. iOS アプリを構成します。

    1. iOS アプリでこれらのリンクを処理する予定の場合は、Firebase コンソールのプロジェクト設定で iOS バンドル ID を指定する必要があります。それに加えて、App Store ID と Apple デベロッパー チーム ID を指定する必要があります。
    2. FDL ユニバーサル リンク ドメインをアプリ機能の関連ドメインとして構成する必要があります。
    3. アプリを iOS バージョン 8 以下に配布する予定がある場合は、iOS バンドル ID を受信 URL のカスタム スキームとして設定する必要があります。
    4. 詳しくは、iOS Dynamic Links の受信の手順をご覧ください。

ウェブアプリでメール アクションを処理する

最初にウェブアプリでアクション コード リンクを処理し、正常に完了した後で別のウェブページまたはモバイルアプリ(使用可能な場合)にリダイレクトするかどうかを指定できます。これを行うには、firebase.auth.ActionCodeSettings オブジェクトで handleCodeInAppfalse に設定します。iOS バンドル ID または Android パッケージ名は必須ではありませんが、指定すると、メール アクション コードの完了時にユーザーを指定されたアプリにリダイレクトさせることができます。

ここで使用されるウェブ URL は、メール アクション テンプレートのセクションで構成された URL です。デフォルトの URL がすべてのプロジェクトにプロビジョニングされます。メール アクション ハンドラをカスタマイズする方法について詳しくは、メールハンドラのカスタマイズをご覧ください。

この場合、continueUrl クエリ パラメータ内のリンクは、ActionCodeSettings オブジェクトで指定された URL がペイロードに含まれる FDL リンクになります。アプリからの受信リンクは、他の依存関係なしでもインターセプトして処理できますが、FDL クライアント ライブラリを使用してディープリンクを解析することをおすすめします。

メール確認などのメール アクションを処理する場合、ディープリンクから oobCode クエリ パラメータのアクション コードを解析した後、applyActionCode 経由でそのコードを適用し、変更を有効にする(メール確認などが行われるようにする)必要があります。

モバイルアプリでメール アクションを処理する

モバイルアプリがインストールされている場合に、最初にモバイルアプリ内でアクション コード リンクを処理するかどうかを指定できます。Android アプリの場合は、android.installApp を使って、デバイスでサポートされているアプリがまだインストールされていなければインストールするよう指定することもできます。そのモバイルアプリをサポートしていないデバイスからリンクがクリックされた場合、リンクはウェブページから開かれます。これを行うには、firebase.auth.ActionCodeSettings オブジェクトで handleCodeInApptrue に設定します。モバイルアプリの Android パッケージ名または iOS バンドル ID も指定する必要があります。

モバイルアプリが使用できない場合に使用される代替ウェブ URL は、メール アクション テンプレートのセクションで構成された URL です。デフォルトの URL がすべてのプロジェクトにプロビジョニングされます。メール アクション ハンドラをカスタマイズする方法について詳しくは、メールハンドラのカスタマイズをご覧ください。

この場合、ユーザーに送信されるモバイルアプリ リンクは、ペイロードがアクション コード URL の FDL リンクとなります。この FDL リンクは、コンソールで構成され、oobCodemodeapiKeycontinueUrl のクエリ パラメータを含んでいます。後者は、ActionCodeSettings オブジェクトで指定された元の URL になります。アプリからの受信リンクは、他の依存関係なしでもインターセプトして処理できますが、FDL クライアント ライブラリを使用してディープリンクを解析することをおすすめします。アクション コードは、メールハンドラのカスタマイズで説明されているウェブフローからの処理方法と同様に、モバイルアプリから直接適用できます。

メール確認などのメール アクションを処理する場合、ディープリンクから oobCode クエリ パラメータのアクション コードを解析した後、applyActionCode 経由でそのコードを適用し、変更を有効にする(メール確認などが行われるようにする)必要があります。