Apple Android ログイン

Android上のAppleログインはハックです。AppleはAndroidに対して公式のサポートを提供していないためです。 Sign in with Apple Android上のAppleログインの解決策は少しハック的です。

Androidは現在、OAuth2ウェブサイトを表示するためにChromeタブを使用しています。このアプローチには、以下の課題があります:

• 難しい設定
• バックエンドが必要

Android上のフローを理解する

フローを説明するための図を使用してください:

flowchart TD
    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
    B --> |Pass the link| C(Open the Chrome browser)
    C --> D(Wait for the user to login)
    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
    E --> F(Redirect back to the app)
    F --> G(Return to JS)

課題やフローを理解したので、設定を始めましょう。

サービスIDを作成する

1. Apple Developer Portalにログイン Apple Developer Portal.

2. Apple Developer Portalの識別子セクション Identifiers.

   

   Apple Developer Portalの識別子画面

   
   1. App IDが見つかります。 App IDs
   2. 注意

      __CAPGO_KEEP_0__

      Appleログインを設定していない場合は、作成する必要があります。私にはすでに作成済みのものがあります。使用するアプリIDは me.wcaleniewolny.test.ionic.vueない場合は、以下の手順で作成してください。 アプリを作成する手順.

3. アプリの Sign in with Apple 機能が有効になっていることを確認してください。

   1. リストからアプリを選択
   2. 機能が有効になっていることを確認 Sign in with Apple Appleログイン機能が有効なチェックボックス
   3. すべてに戻る

4. Appleログイン設定 All Identifiers

   

5. __CAPGO_KEEP_0__をクリックして App Ids と移動 Services IDs

   

6. 新しい識別子を作成

   1. プラスボタンをクリック

      

   2. 選択 Servcice IDs とクリック Continue

      

   3. 説明と識別子を入力してクリック Continuie.

      

      注意

      これ identifiers ここに渡す値になります。 clientId 関数に渡す値になります。 initialize バックエンド用に ANDROID_SERVICE_ID 後で使いますので、保存してください!!!

      注意

      サービスIDはアプリIDと一致する必要はありませんが、サービスIDを

      設定することをお勧めします。 例えば、 YOUR_APP_ID.service __CAPGO_KEEP_0__ me.wcaleniewolny.test.ionic.vue for my app ID but I am using ee.forgr.io.ionic.service2 as the service ID.

   4. Please verify the details and click Register

      

   5. Click on the the newly created service

      

   6. Enable the Sign in with Apple option

      

   7. Configure the Sign In with Apple

      

   8. Ensure that the Primary App ID __CAPGO_KEEP_0__を前のステップで設定したApp IDに設定します。

      

   9. あなたがバックエンドをホストするドメインを追加してください。

      

      注意

      このバックエンド は HTTPSで実行されている必要があります。ドメインについては、次のセクションを読み終わった後、バックエンドを設定した後、このステップに戻ってください。このチュートリアルの目的のために、 Return URLsをリターンURLと https://xyz.wcaleniewolny.me/login/callback ドメインとして使用します。次へ進みます。 xyz.wcaleniewolny.me ドメイン

   10. __CAPGO_KEEP_0__を確認し、クリック Done

       

   11. Click on Continue

       

   12. Click on Save

       

キーを作成中

1. すべてに戻る All Identifiers

   

2. Click on Keys

   

3. Click on the plus icon

   

4. キー名を入力

   

   __CAPGO_KEEP_2__

   __CAPGO_KEEP_3__

5. __CAPGO_KEEP_4__ Sign in with Apple __CAPGO_KEEP_5__ Configure

   

6. __CAPGO_KEEP_7__ Save

   

   Note

   This must be the same App ID as the ID in the previous steps.

7. Click on Continue

   

8. Click on Register

   

9. Copy the key ID and download the key.

   

   Caution

   IMPORTANT: このIDを保存してください。バックエンドではこのIDが呼ばれます。 KEY_IDキーをダウンロードしてください。キーを誰にも共有しないでください。

10. ダウンロードしたキーをバックエンドフォルダに保存してください。

    

チームIDを取得する

Capacitorを使用するには Login with Apple Androidで使用するには、チームIDを取得する必要があります。 Team IDバックエンドで使用するため

1. Capgoの このウェブサイト このウェブサイトに移動して下にスクロールしてください。

2. アプリを検索してください Team ID

   

アプリのリダイレクト設定

図では、バックエンドがアプリに実行するステップとして「」と呼ばれるステップを実行します。 Redirect back to the appこのステップには、アプリの変更が必要です。

1. 変更する AndroidManifest.xml

   1. ファイルを開いてください。ここでは「」を使用します。 AndroidStudio

      

   2. 「」を探してください。 MainActivity MainActivityに追加する「」のIntentフィルタを追加してください。

      

      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="capgo-demo-app" android:host="path" />
      </intent-filter>

2. Modify the MainActivity

   1. pleasese the MainActivity

      

   2. Add the following code:

      

      @Override
      protected void onNewIntent(Intent intent) {
          String action = intent.getAction();
          Uri data = intent.getData();
      
          if (Intent.ACTION_VIEW.equals(action) && data != null) {
              PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
              if (pluginHandle == null) {
                  Log.i("Apple Login Intent", "SocialLogin login handle is null");
                  return;
              }
              Plugin plugin = pluginHandle.getInstance();
              if (!(plugin instanceof SocialLoginPlugin)) {
                  Log.i("Apple Login Intent", "SocialLogin plugin instance is not SocialLoginPlugin");
                  return;
              }
              ((SocialLoginPlugin) plugin).handleAppleLoginIntent(intent);
              return;
          }
          super.onNewIntent(intent);
      }

      注意

      この例では、deep linksが設定されていないことを前提としています。設定されている場合は、codeを調整してください

Note

あなたは新しいデープリンクをアプリに追加しました。デープリンクは以下のようになります。 capgo-demo-app://pathを変更できます。 android:scheme を変更できます。 android:host 重要: バックエンド設定では、このデープリンクは バックエンド設定 BASE_REDIRECT_URL

バックエンド設定

ここ 以下の機能が提供されます。

シンプルなJSONデータベース

• この例では、
• AppleサーバからJWTを要求する方法
• JWTの簡単な検証

注意

この例をホストするために使用したものです。 PM2 この例は ecosystem.config.js ここで見つけることができます このチュートリアルで述べたすべてのことを考慮すると、このセクションは次のようになります:

= サービスID env = アプリID

• ANDROID_SERVICE_ID = App ID
• IOS_SERVICE_ID = App ID

env: {
  PRIVATE_KEY_FILE: "AuthKey_U93M8LBQK3.p8",
  KEY_ID: "U93M8LBQK3",
  TEAM_ID: "UVTJ336J2D",
  ANDROID_SERVICE_ID: "ee.forgr.io.ionic.starter.service2",
  IOS_SERVICE_ID: "me.wcaleniewolny.test.ionic.vue",
  PORT: 3000,
  REDIRECT_URI: "https://xyz.wcaleniewolny.me/login/callback",
  BASE_REDIRECT_URL: "capgo-demo-app://path"
}

プラグインを使用

の使用方法 login の関数の変更はありません、IOSと同じです。詳しくはそのセクションを参照してください。 しかしのメソッドは少し変更されます。 initialize クリップボードにコピー

await SocialLogin.initialize({
  apple: {
    clientId: 'ee.forgr.io.ionic.starter.service2',
    redirectUrl: 'https://appleloginvps.wcaleniewolny.me/login/callback'
  }
})

注意、追加

HOWEVER redirectUrl WILL iOSに影響します!!!!

アプリを作成する

注意

App IDがすでに存在する場合は、このステップをスキップしてください。 Apple Login for iOSが設定されている場合は、このステップを実行しないでください。

1. App IDが存在しない場合は、プラスボタンをクリックしてください

   

2. 選択 App IDs 続行

   

3. タイプをクリックしてください App とクリック Continue

   

4. 説明とアプリIDを入力してください

   

5. 有効 Sign with Apple 機能

   

6. クリック Continue

   

7. 詳細を確認してクリック Register

   

Apple Android から続けてください

Android を使用している場合 Android を使用している場合 Apple login を使用して認証とアカウントフローを計画し、Cloudflare の Capgo を接続します。 @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-passkey @capgo/capacitor-passkey @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric 実装詳細の詳細については、@capgo/capacitor-native-biometric に記載されています。 2要素認証 実装詳細については、2要素認証に記載されています。