iOSアプリのユーザーエクスペリエンス

iOSアプリのユーザーエクスペリエンス

このセクションでは、ユーザーがiOSアプリでLogin with Amazonを使用する場合のログインフローについて説明します。iOS用のLogin with Amazon SDKを使用すると、最初のサインインからユーザーの同意の取得、プロファイル情報の共有(リクエストした場合)、最後にユーザーをiOSアプリに戻すまでの一連のログインフローに対応できます。

手順1: [Login with Amazon] ボタン

ユーザーがiOSアプリで [Login with Amazon] ボタンをクリックすると、ログインフローが開始します。アプリのサインイン画面と登録画面には、Login with Amazonブランドのボタンを配置することをお勧めします。ユーザーがAmazon認証情報を使用してすぐにアプリにログインできるように、アプリのヘッダーやフッターに [Login with Amazon] ボタンを配置することもできます。

iOSアプリのLWAボタン

[Login with Amazon] ボタンを実装する手順については、iOSでの使用開始手順を参照してください。

手順2: ログインフロー

iOS用のLogin with Amazon SDKは、各ユーザーの環境に応じて、次のいずれかのログインフローを自動的に提示します。

Amazonモバイルショッピングアプリを使用したシングルサインオンフロー

iOSデバイスでAmazonモバイルショッピングアプリに既にサインインしている状態で、ユーザーが [Login with Amazon] ボタンをクリックすると、Amazonアカウント認証情報の入力画面は表示されません。代わりに、iOS用のLogin with Amazon SDKがAmazonモバイルショッピングアプリのユーザー認証を認識し、そのアカウント情報を使用してユーザーがiOSアプリにログインできるようにします。ユーザーは、プロファイル情報をアプリと共有することに1回同意するだけで済みます(アプリがリクエストした場合)。

このフローでは、まずユーザーがiOSアプリにアクセスします(A)。[Login with Amazon] ボタンをクリックすると(B)、Amazonモバイルショッピングアプリ内の安全なAmazonブランドのページにリダイレクトされ、プロファイルデータにアプリがアクセスすることへの同意を求められます(C)。同意済みの場合や、同意が必要なスコープをアプリがリクエストしていない場合は、この手順はスキップされます。その後、ユーザーは同意画面からアプリにリダイレクトされます(D)。

SSO cxフローチャート

埋め込みウェブビューを使用したシングルサインオンフロー(iOS 11以上)

iOS 11以上を実行しているデバイスで、ユーザーが [Login with Amazon] ボタンをクリックすると、安全なAmazonブランドのページが表示されます。このページでAmazonアカウント認証情報を入力すると、アプリにログインできます。ユーザーがiOS 11を搭載したデバイスを使用している場合、SFAuthenticationSessionにより、アプリ内にログイン画面が安全に表示されます。iOS 12以上を搭載したデバイスでは、ASWebAuthenticationSessionを使用してログイン画面が表示されます。サインイン後、ユーザーは、プロファイル情報をアプリと共有するたびに一度だけ同意する必要があります(アプリがリクエストした場合)。この2つの認証セッションは、以下のSVCフローとよく似た働きをします。

SSOは理想的なログインを実現します。ユーザーは、サインインのために(現在のアプリから移動して)ほかのアプリやブラウザを起動する必要がありません。この方式が、Amazonモバイルショッピングアプリを使用したSSOに取って代わったのは、ほかのアプリへのリダイレクトによりセキュリティリスクが生じる可能性があるためです。また、開発者は、コンテンツを処理するために独自のアプリ内ウェブビューをビルドする必要がありません(これは余分な時間を必要とするうえ、ユーザーが入力する機密情報をネイティブのウェブビューが制御するため、セキュリティリスクが生じる可能性もあります)。

このフローでは、まずユーザーがiOSアプリにアクセスします(A)。[Login with Amazon] ボタンをクリックすると(B)、アプリ内の埋め込みウェブビューでログイン画面にリダイレクトされます(C)。Amazonアカウント認証情報を入力すると、ウェブビューが更新され、ユーザーはプロファイルデータにアプリがアクセスすることへの同意を求められます(D)。同意済みの場合や、同意が必要なスコープをアプリがリクエストしていない場合は、代わりに確認ページが表示されます。その後、ウェブビューが閉じられ、ユーザーはアプリの操作に進むことができます(E)。

SVC cxフローチャート

Safari View Controllerフロー(iOS 9以上)

iOS 9以上を実行しているデバイスで、ユーザーが [Login with Amazon] ボタンをクリックすると、安全なAmazonブランドのページが表示されます。このページでAmazonアカウント認証情報を入力すると、アプリにログインできます。ユーザーがiOS 9以上のデバイスを使用している場合、ログイン画面はアプリ内のSafari View Controller(SVC)で安全に表示されます。サインイン後、ユーザーは、プロファイル情報をアプリと共有するたびに一度だけ同意する必要があります(アプリがリクエストした場合)。

iOS 9でAppleがSVCを導入したため、アプリ内の「ミニチュア」バージョンのSafariで外部ウェブコンテンツを起動できるようになりました。SVCは理想的なログインを実現します。ユーザーは、サインインのために(プロセス中にアプリから移動して)ほかのアプリやブラウザを起動させる必要がありません。また、開発者は、コンテンツを処理するために独自のアプリ内ウェブビューをビルドする必要がありません(これは余分な時間を必要とするうえ、ユーザーが入力する機密情報はネイティブのウェブビューが制御するため、セキュリティリスクが生じる可能性もあります)。

SVCフローでは、まずユーザーがiOSアプリにアクセスします(A)。[Login with Amazon] ボタンをクリックすると(B)、ユーザーはアプリ内のSVCウィンドウでログイン画面にリダイレクトされます(C)。Amazonアカウント認証情報を入力すると、SVCウィンドウが更新され、ユーザーはプロファイルデータにアプリがアクセスすることへの同意を求められます(D)。同意済みの場合や、同意が必要なスコープをアプリがリクエストしていない場合は、この手順はスキップされます。その後、SVCウィンドウが閉じられ、ユーザーはアプリの操作に進むことができます(E)。

SVCフローのシングルサインオン(SSO)は、iOS 9とiOS 10でのみ機能します。iOS 11以上では、Safari View ControllerとSafariの間でCookieを共有できなくなりました。つまり、iOS 11以上を使用しているユーザーが複数のアプリを使用する場合、1回ではなく複数回サインインする必要があります。iOS 11以上でSSOのサポートを有効にするには、Login with Amazonバージョン3.1.0以上にアップデートしてください。

SVC cxフローチャート

システムブラウザフロー(iOS 8以下)

ユーザーがデバイスにAmazonモバイルショッピングアプリをインストールしていない場合、またはインストールしていてもサインインしていない場合、Login with Amazonは安全なAmazonブランドの画面を表示します。ここでAmazonアカウント認証情報を入力し、ユーザーは目的のアプリにログインできます。ユーザーがiOS 8以下のデバイスを使用している場合、ログイン画面はシステムウェブブラウザ(通常はSafari)に安全に表示されます。サインイン後、ユーザーは、プロファイル情報をアプリと共有するたびに一度だけ同意する必要があります(アプリがリクエストした場合)。

システムブラウザフローでは、まずユーザーがiOSアプリにアクセスします(A)。[Login with Amazon] ボタンをクリックすると(B)、ユーザーはアプリから離れ、システムブラウザの安全なAmazonブランドのログイン画面にリダイレクトされます(C)。Amazonアカウント認証情報を入力すると、別の安全なAmazonブランドのページがシステムブラウザで開き、ユーザーはプロファイルデータにアプリがアクセスすることへの同意を求められます(D)。同意済みの場合や、同意が必要なスコープをアプリがリクエストしていない場合は、この手順はスキップされます。その後、ユーザーはブラウザウィンドウからアプリにリダイレクトされます(D)。

システムブラウザcxフローチャート

手順3: ログイン画面

SVCフローとシステムブラウザフローではどちらも、Amazonユーザーが [Login with Amazon] ボタンをクリックするとすぐにログイン画面が表示されます。

LWAログイン画面

Amazonブランドのログイン画面の構成は、次のようになります。

  • 開発者がLogin with Amazonに登録するときに選択したアプリ名。
  • [パスワードをお忘れですか?] リンク。クリックすると、ユーザーはAmazon.comのパスワードをリセットできます。
  • ユーザーがAmazon.comアカウント認証情報を入力するフィールド。
  • [パスワードを表示] チェックボックス。これをオンにすると、入力するパスワードを表示できます。デフォルトでオン(パスワードが表示される設定)になっています。
  • [ログインしたままにする] チェックボックス。これをオンにすると、次回Login with Amazonを使用してアプリにアクセスするときにログイン画面と同意画面をスキップできます。代わりに、次回アプリにログインするときには確認画面(下図)が表示され、[次へ進む] をクリックするとAmazonアカウント認証情報でアプリにログインできます。
    LWA確認画面
  • 安全な [ログイン] ボタン。アカウント認証情報を使用してAmazonに認証する準備ができている場合にクリックします。[ログイン] をクリックすると、上記のログインフローセクションで説明したように、ユーザーは同意画面またはアプリにリダイレクトされます。
  • [アカウントを作成] ボタン。ここをクリックすると、新規アカウントを作成して、アプリにサインインできます。
  • [詳細はこちら] リンク。Login with Amazonを使用するメリットや、そのほかの詳細を確認できます。
  • Login with Amazonの使用に関連する [利用規約][プライバシー規約] へのリンク。

アプリがユーザープロファイル情報(ユーザーの名前、Eメールアドレス、郵便番号など)へのアクセスをリクエストした場合、同意画面を通じてユーザーに通知されます。

LWA同意画面

Amazonブランドの同意画面の構成は、次のようになります。

  • ユーザーの名前を表示するドロップダウンリスト(右上)。ドロップダウンの矢印をクリックすると、認証の際に別のAmazonアカウントを選択することができます。
  • 開発者がLogin with Amazonに登録するときに設定したアプリ名とロゴ。
  • アプリにリクエストされた各パーミッションの一覧。
  • [同意する] ボタン。ユーザーが情報の共有に同意する場合にクリックします。[同意する] をクリックすると、上記のログインフローセクションで説明したように、ユーザーはアプリにリダイレクトされます。
  • [キャンセル] ボタン。ユーザーが情報の共有に同意しない場合にクリックします。[キャンセル] をクリックすると、ユーザーは認証されていない状態でアプリに戻されます。
  • [お客様のアカウント] リンク。クリックすると、ユーザーはLogin with Amazonを介してアプリに付与したパーミッションを削除できます。
  • 開発者がLogin with Amazonに登録するときに設定したアプリのプライバシーポリシーへのリンク。

手順5: 成功

ログインフローが完了すると、ユーザーは自動的にiOSアプリにリダイレクトされます。