Apple Android でのログイン

AppleログインはAndroidではハックです。AppleはAndroidに対する公式のサポートを提供していないため、解決策は少しハックです。 Sign in with Apple Androidでは、OAuth2ウェブサイトを表示するためにChromeタブを使用しています。このアプローチには、以下の課題があります。

難しい設定

• バックエンドが必要
• Android上のフローを理解する

「Android上のフローを理解する」のセクション

Appleログインフロー図（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)

Android上のAppleログインのフロー図

サービス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ログインを設定していない場合は、設定してください。 me.wcaleniewolny.test.ionic.vue私にはすでに設定済みです。使用するアプリIDは Appleログインを設定する手順.

3. 設定したアプリIDの 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.

      

      Note

      This identifiers will become the clientId that you will pass in the initialize function AND ANDROID_SERVICE_ID for the backend.

      Please save it!!!

      Note

      Service ID doesn’t have to match the App ID, but I recommend setting the service ID to YOUR_APP_ID.service . As a reminder, I am using me.wcaleniewolny.test.ionic.vue for my app ID ですが、使用中 ee.forgr.io.ionic.service2 サービスIDとして使用しています。

   4. 詳細を確認し、をクリックしてください Register

      

   5. 新しく作成されたサービスにクリック

      

   6. を有効に Sign in with Apple オプション

      

   7. Sign in with Appleの設定 Sign In with Apple

      

   8. Sign in with Appleの設定を確認 Primary App ID __CAPGO_KEEP_0__を前回のステップで設定したApp IDに設定します。

      

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

      

      注意

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

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

       

   11. __CAPGO_KEEP_1__をクリック Continue

       

   12. __CAPGO_KEEP_1__をクリック Save

       

キーを作成中

1. すべての__CAPGO_KEEP_4__に戻る All Identifiers

   

2. __CAPGO_KEEP_1__をクリック Keys

   

3. Click on the plus icon

   

4. キー名を入力

   

   注意

   この名前は重要ではないので、なんでも入力してください。

5. 選択 Sign in with Apple とクリック Configure

   

6. 主App IDを選択し、クリック Save

   

   注意

   前述の手順で使用したIDと同じApp IDを入力してください。

7. Click on Continue

   

8. Click on Register

   

9. キーIDをコピーし、キーをダウンロードしてください。

   

   注意

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

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

    

チームIDを取得する

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

1. バックエンドで使用するためには このウェブサイト このウェブサイトにアクセスして下部までスクロールしてください。

2. Find the Team ID

   

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

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

1. Modify the AndroidManifest.xml

   1. Android Studioで開く AndroidStudio

      

   2. Find the 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. Please open 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);
      }

      注意

      この例では、既存の深いリンクが設定されていないことを前提としています。設定されている場合は、codeを調整してください

Note

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

バックエンド設定

ここ 以下の内容が提供されます。

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

• 重要:バックエンド設定では、このデープリンクは__CAPGO_KEEP_0__になります。
• AppleサーバーからJWTを要求する方法
• JWTの簡単な検証

注意

私は PM2 この例をホストするために使用しています。 ecosystem.config.js この例は ここにあります

このチュートリアルで述べたすべてのことを考慮して、セクションは次のようになります: env = サービスID

• ANDROID_SERVICE_ID = アプリID
• IOS_SERVICE_ID __CAPGO_KEEP_0__

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'
  }
})

注意:追加

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

アプリを作成する

注意

App IDがすでにあります場合は、このステップをスキップしてください。 Apple Login for iOSが設定済みの場合は、このステップを実行しないでください。

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

   

2. 選択 App IDs 続行する

   

3. Click on type App and click Continue

   

4. Enter the description and the app ID

   

5. Enable Sign with Apple capability

   

6. Click Continue

   

7. Confirm the details and click Register

   

Apple Android から続けてください

Apple Android を使用している場合 Apple Android を使用しています 認証とアカウントフローの計画に使用し、Apple Android を接続する @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要素認証 に参照してください。