Apple Android でログイン

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

難しい設定

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

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

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. Apple Developer Portalの識別子画面

      Note

      Appleログインを設定していない場合は、Appleログインを作成する必要があります。 me.wcaleniewolny.test.ionic.vue設定済みの場合、以下のアプリIDを使用します。 create app step.

3. アプリの設定を確認してください。 Sign in with Apple アプリのリストからアプリを選択してください。

   1. アプリの設定を確認してください。
   2. Sign in with Apple機能を有効にします。 Sign in with Apple Sign in with Apple機能を有効にします。
   3. __CAPGO_KEEP_0__を有効にしていない場合は、有効にします。

4. すべてに戻る All Identifiers

   

5. __CAPGO_KEEP_1__をクリックしてください App Ids と移動してください Services IDs

   

6. 新しい識別子を作成

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

      

   2. 選択してください Servcice IDs とクリックしてください Continue

      

   3. __CAPGO_KEEP_0__を入力し、識別子を入力し、クリックしてください Continuie.

      

      注意

      これは identifiers これが clientId function AND initialize バックエンドに渡す値になります。 ANDROID_SERVICE_ID 保存してください!!!

      注意

      __CAPGO_KEEP_0__

      サービスIDはアプリIDと一致する必要はありませんが、サービスIDを設定することをお勧めします。 YOUR_APP_ID.service ご了承ください。私はアプリIDとして me.wcaleniewolny.test.ionic.vue を使用していますが、サービスIDとして ee.forgr.io.ionic.service2 を使用しています。

   4. 詳細を確認し、 Register

      

   5. 新しく作成したサービス

      

   6. オプション Sign in with Apple サービスIDの

      

   7. サービスIDの設定 Sign In with Apple

      

   8. __CAPGO_KEEP_0__が Primary App ID __CAPGO_KEEP_0__に設定されていることを確認してください

      

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

      

      注意

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

   10. データを確認し、クリックしてください。 Done

       

   11. サービス設定のための Continue

       

   12. サービス設定のための Save

       

キーを作成中

1. すべての識別子に戻る All Identifiers

   

2. クリックしてください Keys

   

3. プラスアイコンをクリックしてください

   

4. キー名を入力してください

   

   この名前は重要ではありません。何でも入力できます。

   選択してください

5. クリックしてください Sign in with Apple Appleサインインの設定と構成 Configure

   

6. Select the primary App ID, and press 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.

   

   注意

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

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

    

チームIDを取得する

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

1. Go to このウェブサイト と下にスクロール

2. チームIDの Team ID

   

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

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

1. 変更する AndroidManifest.xml

   1. ファイルを開きます。ここでは AndroidStudio

      

   2. チームIDの 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. を変更する MainActivity

   1. ください MainActivity

      

   2. code をMainActivityに追加する

      

      @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 を調整してください。

注意

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

バックエンド設定

Androidではバックエンドが必要ですが、バックエンドを設定するとiOSにも影響します。例として、以下のバックエンドが提供されています。 ここ

この例では、以下の機能が提供されます。

• シンプルなJSONデータベース
• AppleのサーバーからJWTを要求する方法
• シンプルなJWT検証

注意

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

__CAPGO_KEEP_0__ env __CAPGO_KEEP_0__

• ANDROID_SERVICE_ID = サービスID
• IOS_SERVICE_ID = アプリ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"
}

プラグインの使用

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

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

危険

注意、追加すると 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

   

AndroidでAppleログインから続けて

Capacitorを使用している場合 AndroidでAppleログイン 認証とアカウントフローの計画に使用する場合、Capacitorを Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-social-login @capgo/capacitor-passkey @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric 2要素認証 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometric