Facebookログインをネイティブアプリに追加する

ネイティブアプリケーションに機能を追加して、ユーザーがアプリケーション内でネイティブにFacebookを使用して認証できるようにすることができます。これにより、Webブラウザ経由のリダイレクトは必要なくなり、モバイルアプリケーションはFacebook開発者ポリシーに準拠するようになります。このポリシーでは、モバイルアプリケーションが認証にAndroidまたはiOS用の Facebook SDK を使用することが義務付けられています。

仕組み

ネイティブ Facebook ログインフローは次のように機能します:

  • ステップ 1:アプリケーションはFacebook SDKを介してユーザーを認証し、アクセストークンを取得します。

  • ステップ 2:アプリケーションはそのアクセストークンを使用して、特別なFacebookセッション情報アクセストークンを要求します。

  • ステップ 3:Facebook SDKを使用してユーザーのプロファイルを取得します。

  • ステップ 4:その後、アプリケーションはFacebookセッション情報トークンを使用して Auth0で認証できます。

前提条件

Auth0経由でネイティブアプリのFacebook ネイティブログインを構成する前に、次の操作を行う必要があります:

  1. FacebookをAuth0接続としてセットアップする

  2. アプリケーションで関連するFacebook SDKを使用する

  3. Auth0 Dashboard>Applications>Applicationsへ移動し、Auth0を使用してアプリケーションを作成します(まだ作成していない場合)。

  4. 設定ページの下部で、[Show Advanced Settings(詳細設定を表示)]を選択し、[Device Settings(デバイス設定)]ビューを選択します。[Native Social Login(ネイティブ ソーシャル ログイン)]の下で、[Enable Sign In with Facebook(Facebookサインインを有効にする)]トグルを有効にします。

    ネイティブソーシャルログイン設定

実装

ネイティブFacebookログインを使用してユーザープロファイルを認証するプロセスは、アプリケーションの観点から見ると4つのステップで構成されます。

ステップ1

アプリケーションはFacebook SDKを介してユーザーを認証します。Facebookからアクセストークンを取得します。

ステップ2

アプリケーションはアクセストークンを使用してFacebookFacebookセッション情報アクセストークンを要求します。

この要求は次のようになります:

GET https://graph.facebook.com/v5.0/oauth/access_token?grant_type=fb_attenuate_token&client_id=457704041391802&fb_exchange_token=<facebook_access_token>

Was this helpful?

/

応答は次のようになります:

{
    "access_token": "XAAGgR4b...1lHWNCpqrAhcpoAZDZD",
    "token_type": "bearer",
    "expires_in": 5183924
}

Was this helpful?

/

ステップ3

アプリケーションは、Facebook SDK を使用してFacebookからユーザープロファイルを取得する必要があります。これは次のような要求で終わります:

GET https://graph.facebook.com/v5.0/<facebook user id>?access_token=<facebook access token>&fields=email,name

Was this helpful?

/

ステップ4

その後、アプリケーションは、facebook-session-access-tokenトークンタイプでトークン交換フローを使用して Auth0の/oauth/tokenエンドポイントを呼び出すことにより、セッション情報アクセストークンと Facebookユーザープロファイルを使用してAuth0で認証できます。すべてがうまくいけば、Auth0はユーザープロファイルを追加した通常の応答をExchangeから返します。ユーザープロファイルは、文字列としてエンコードされたJSONオブジェクトである必要があります。

codeblockOld.header.login.configureSnippet
POST https://{yourDomain}/oauth/token

grant_type: 'urn:ietf:params:oauth:grant-type:token-exchange'
subject_token_type: 'http://auth0.com/oauth/token-type/facebook-info-session-access-token'
audience: 'your-api'
scope: 'read:appointments openid profile email email_verified'
subject_token: 'XAAGgR4b...1lHWNCpqrUHZAEtUuZAhcpoAZDZD'
client_id: '{yourClientId}'
user_profile: '{"email":"john@example.com", "name":"John Doe"}'

Was this helpful?

/

Auth0からの応答は以下のとおりです:

{
    "access_token": "eyJ0eXA..yXQaPLVXg",
    "id_token": "eyJ0.tFE5HPipdOsA",
    "scope": "openid profile email read:appointments",
    "expires_in": 86400,
    "token_type": "Bearer"
}

Was this helpful?

/

ユーザープロフィールとメールの検証

先ほどの例では、Facebookからユーザープロファイルを取得し、それを/oauth/token Apple のAppStoreレビューガイドラインにより、Facebookアクセス トークンをサーバーに直接送信することもできないためです。したがって、クライアントで取得し、この方法でAuth0に送信する必要があります。

Auth0は、ユーザープロファイルがFacebookによって返されたものと同じであることを保証できないため、email_verifiedフィールドをfalseに設定します。

ログアウト

ネイティブログイン実装では標準のブラウザベースのフローが使用されないため、アプリケーション所有者はログアウトを適切に実行するように注意する必要があります。アプリケーションがログアウトを実行する必要がある場合は、Auth0リフレッシュトークンも取り消す必要があります。

続きもお読みください