애플 로그인 (안드로이드)

Apple 로그인은 안드로이드에서 HACKY합니다. Apple은 안드로이드에서 공식적으로 지원하지 않습니다. Sign in with Apple 안드로이드에서 Apple 로그인을 사용하는 방법은 약간 HACKY합니다.

안드로이드에서는 현재 Chrome 탭을 사용하여 OAuth2 웹사이트를 표시합니다. 이 접근 방식에는 다음 문제점이 있습니다.

• 구성하기 어려움
• 백엔드가 필요합니다

안드로이드에서 흐름을 이해하는 것이 어렵습니다.

흐름을 이해하는 안드로이드 다이어그램

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 섹션을 클릭합니다. Identifiers.

   

   다음과 같은 화면을 볼 수 있습니다.

   
   1. 이 필드가 다음과 같이 표시되어야 합니다. App IDs
   2. App ID를 찾을 수 있습니다.

      참고

      IOS에 Apple 로그인을 구성하지 않았다면, 하나를 만들 수 밖에 없습니다. 저는 이미 하나가 만들어졌습니다. 사용할 앱 ID는 me.wcaleniewolny.test.ionic.vueIOS에 Apple 로그인을 구성하지 않았다면, 하나를 만들 수 밖에 없습니다. 저는 이미 하나가 만들어졌습니다. 사용할 앱 ID는 하나가 없다면 .

3. 단계를 통해 하나를 생성하세요. Sign in with Apple 앱에

   1. 리스트에서 앱을 선택하세요.
   2. 리스트에서 앱을 선택하세요. Sign in with Apple 체크박스를 클릭하세요.
   3. 모두로 돌아가세요.

4. 모두로 돌아가세요. All Identifiers

   

5. 클릭하여 App Ids 및 이동 Services IDs

   

6. 새 식별자 만들기

   1. 플러스 버튼 클릭

      

   2. 선택 Servcice IDs 및 클릭 Continue

      

   3. 설명과 식별자 입력 후 클릭 Continuie.

      

      주의

      이것은 identifiers 백엔드에서 전달할 clientId 함수 AND initialize 백엔드에 대해. ANDROID_SERVICE_ID 잘 저장하세요!!!

      주의

      서비스 ID는 앱 ID와 일치할 필요는 없지만, 서비스 ID를

      앱 ID와 일치하도록 설정하는 것을 추천합니다. YOUR_APP_ID.service 이것은 me.wcaleniewolny.test.ionic.vue for my app ID 하지만 나는 사용중입니다 ee.forgr.io.ionic.service2 서비스 ID로 사용중입니다.

   4. 세부 정보를 확인하고 클릭하세요 Register

      

   5. 새로 생성된 서비스 ID를 클릭하세요

      

   6. Enable the Sign in with Apple option

      

   7. Configure the Sign In with Apple

      

   8. 서비스 ID에서 Sign in with Apple을 활성화하는 것을 확인하세요 Primary App ID __CAPGO_KEEP_0__을 이전 단계에서 설정한 App ID로 설정합니다.

      

   9. 백엔드 호스팅을 위해 사용할 도메인을 추가하세요.

      

      주의

      이 백엔드 는 HTTPS에서 실행되어야 합니다. 반환 URL과 도메인에 대한 설정은 이 튜토리얼의 다음 섹션을 읽고 백엔드 설정을 완료한 후에 다시 돌아와야 합니다. 이 튜토리얼의 경우 반환 URL과 도메인을 사용하겠습니다. 다음을 클릭하세요. Return URLsprotectedTokens https://xyz.wcaleniewolny.me/login/callback protectedTokens xyz.wcaleniewolny.me protectedTokens

   10. 데이터를 확인하고 클릭하세요. Done

       

   11. 클릭하세요. Continue

       

   12. 클릭하세요. Save

       

키 생성 중입니다.

1. 모두로 돌아가기 All Identifiers

   

2. 클릭하세요. Keys

   

3. Click on the plus icon

   

4. 키 이름을 입력하세요

   

   주의

   이 이름은 중요하지 않습니다. 아무거나 입력해도 됩니다.

5. 선택 Sign in with Apple 클릭 Configure

   

6. 주 App ID를 선택하고 Save

   

   주의

   이 App ID는 이전 단계에서 사용한 ID와 동일해야 합니다.

7. 클릭하여 Continue

   

8. 클릭하여 Register

   

9. 키 ID를 복사하고 키를 다운로드하세요.

   

   주의

   중요: __CAPGO_KEEP_0__을 저장하세요. 백엔드에서는 __CAPGO_KEEP_0__으로 불립니다. KEY_ID__CAPGO_KEEP_1__을 다운로드하세요. 이 키를 절대 공유하지 마세요.

10. 다운로드 한 키를 찾고 백엔드 폴더에 저장하세요.

    

팀 ID를 얻는 방법

__CAPGO_KEEP_2__를 사용하려면 Login with Apple 안드로이드에서 __CAPGO_KEEP_2__를 얻어야 합니다. Team ID백엔드에서 사용됩니다.

1. __CAPGO_KEEP_3__로 이동하세요. 이 웹사이트로 이동하세요. 스크롤을 내려주세요.

2. Find the Team ID

   

앱 리다이렉트 설정

그림에서 보신 것처럼 백엔드에서는 Redirect back to the app단계를 수행합니다. 이 작업은 앱의 수동 변경이 필요합니다.

1. 수정하세요 AndroidManifest.xml

   1. 파일을 열어보세요. 나는 AndroidStudio

      

   2. 팀 ID 위치를 찾으세요 MainActivity MainActivity에 다음 인텐트 필터를 추가하세요

      

      <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. 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);
      }

      이 예제는 깊이 링크가 설정되어 있지 않은 경우에만 작동합니다. 깊이 링크가 설정되어 있다면 __CAPGO_KEEP_0__를 조정해 주세요

      This example assumes that you don’t have any deep links configured. If you do, please adjust the code

이 예제는 깊이 링크가 설정되어 있지 않은 경우에만 작동합니다. 깊이 링크가 설정되어 있다면 __CAPGO_KEEP_0__를 조정해 주세요

You have just added a new deep link into your app. The deep link will look something like this: capgo-demo-app://path. You can change the android:scheme and the android:host to modify how this deep link looks. Important: In the backend configuration, this deep link will become BASE_REDIRECT_URL

뒤쪽 설정

여기 This example provides the following:

A simple JSON database

• Backend configuration
• Apple 서버에서 JWT를 요청하는 방법
• JWT를 간단하게 검증하는 방법

주의

이 예제를 호스팅하기 위해 사용하는 방법입니다. 예제는 PM2 여기서 찾을 수 있습니다. ecosystem.config.js 이 튜토리얼에서 설명한 모든 것을 고려하여 부분은 다음과 같이 보입니다.

= 서비스 ID env = 앱 ID

• ANDROID_SERVICE_ID __CAPGO_KEEP_0__
• IOS_SERVICE_ID __CAPGO_KEEP_1__

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에 영향을 미칠 것입니다!!!!

앱을 만들기 위해

주의

주의

1. iOS용 Apple Login을 구성한 경우 이 단계를 건너 뛰세요. App ID가 이미 있는 경우 이 단계를 건너 뛰세요. App ID가 이미 있는 경우 이 단계를 건너 뛰세요.

   

2. 새로운 식별자 플러스 버튼 App IDs 선택

   

3. 타입을 클릭하세요 App 클릭하세요 Continue

   

4. 설명과 앱 ID를 입력하세요

   

5. 켜기 Sign with Apple Apple 로그인 기능

   

6. 클릭 Continue

   

7. 세부 정보를 확인하고 클릭하세요 Register

   

애플 로그인에서 계속

애플 로그인을 사용 중이라면 애플 로그인 인증 및 계정 흐름을 계획하고, @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, and 두 단계 인증 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometric.