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

설치

안드로이드에서 Apple 로그인은 조금 복잡합니다. Apple은 안드로이드에 공식적으로 지원하지 않기 때문에 Sign in with Apple 안드로이드에서 Apple 로그인을 지원하는 공식적인 방법이 없기 때문에

안드로이드에서 현재 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를 생성합니다

Apple 로그인에 사용할 계정으로 로그인합니다 Apple 개발자 Portal.
클릭 Identifiers.

이런 화면을 보실 수 있습니다.
1. 이 필드가 App IDs
2. 앱 ID를 찾을 수 있으십니까?
  Apple Login을 IOS에 구성하지 않았다면, 하나를 생성해야 합니다. 저는 이미 하나를 생성했습니다. 사용할 앱 ID는 me.wcaleniewolny.test.ionic.vue앱 ID가 없으시다면, create app 단계를 통해 하나를 생성해 주세요..
애플 로그인 기능이 활성화되어 있는지 확인하세요. Sign in with Apple 앱에 대한 기능이 활성화되어 있는지 확인하세요.
1. 앱을 클릭하세요.
2. 앱에 대한 기능이 활성화되어 있는지 확인하세요. Sign in with Apple Apple 로그인 기능이 활성화된 체크박스
3. 모두로 돌아가세요.
모든 식별자 наві게이션 버튼 All Identifiers
모두로 돌아가세요. App Ids 그리고 이동하세요 Services IDs
새로운 식별자 만들기
1. 플러스 버튼 클릭
2. 선택 Servcice IDs 및 클릭 Continue
3. 설명과 식별자 입력 후 클릭 Continuie.
  
  이 identifiers will become the clientId 그것을 전달할 것입니다 initialize AND ANDROID_SERVICE_ID 서버 측에서 지원합니다.
  구글로 저장해주세요!!!
  
  Service ID는 App ID와 일치할 필요는 없지만, YOUR_APP_ID.service 을 서비스 ID로 설정하는 것을 추천합니다. me.wcaleniewolny.test.ionic.vue 로 앱 ID를 사용하고 ee.forgr.io.ionic.service2 로 서비스 ID를 사용하고 있습니다.
4. 세부 정보를 확인하고 클릭 Register
5. 새로 생성된 서비스를 클릭하세요.
6. 활성화하기 Sign in with Apple 선택
7. 설정하기 Sign In with Apple
8. 앱 ID가 이전 단계에서 구성된 앱 ID로 설정되어 있는지 확인하세요. Primary App ID 기본 앱 ID 드롭다운 설정
9. option
  
  이 백엔드 는 HTTPS로 실행되어야 합니다. 이에 대한 Return URLs는 이 튜토리얼의 다음 섹션을 읽고 백엔드 구성 후에 다시 돌아와야 합니다. 이 튜토리얼의 목적을 위해 https://xyz.wcaleniewolny.me/login/callback 를 반환 URL로 xyz.wcaleniewolny.me 를 도메인으로 사용합니다. 다음을 클릭하세요.
10. 데이터를 확인하고 클릭 Done
11. 클릭 Continue
12. 클릭하여 Save

키 생성

모두 보기로 돌아가기 All Identifiers
클릭하여 Keys
플러스 아이콘을 클릭하여
키 이름을 지정하세요

이 이름은 중요하지 않습니다. 아무거나 입력해도 됩니다.
Select Sign in with Apple __CAPGO_KEEP_3__ Configure
__CAPGO_KEEP_5__ Save

__CAPGO_KEEP_7__ 이 앱 ID는 이전 단계에서 사용한 ID와 동일해야 합니다.
클릭 Continue
클릭 Register
키 ID를 복사하고 키를 다운로드하세요.

중요: 이 ID를 저장하세요. 백엔드에서는 이 ID를 KEY_ID키를 다운로드하세요. 이 키를 절대 공유하지 마세요.
다운로드 한 키를 백엔드 폴더에 저장하세요.

팀 ID를 가져오는 방법

Android에서 사용하기 위해 Login with Apple Android에서 사용하기 위해 Team ID을 가져와야 합니다. 백엔드에서 사용됩니다.

이 웹사이트로 이동하세요 스크롤 다운 개발자 계정에서
팀 ID 위치를 찾으세요 Team ID

앱 리다이렉트 설정

그림에서 보았듯이 백엔드에서는 앱 리다이렉션을 위한 단계를 수행합니다. Redirect back to the app이 단계는 앱의 수동 변경이 필요합니다.

수정하십시오 AndroidManifest.xml

Android Studio에서 파일을 열어보겠습니다. AndroidStudio

애플/안드로이드 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>

수정하십시오 MainActivity

MainActivity에 Intent 필터 __CAPGO_KEEP_0__를 추가하세요. MainActivity

다음과 같은 code를 추가하세요:

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

백엔드 설정

안드로이드에는 백엔드가 필요하지만 백엔드를 구성하면 IOS에도 영향을 미칩니다. 예를 들어, 다음의 백엔드가 제공됩니다. 여기

이 예제는 다음을 제공합니다.

간단한 JSON 데이터베이스
애플 서버에서 JWT를 요청하는 방법
JWT를 간단하게 검증하는 방법

부분이 보일까요? env 서비스 ID

ANDROID_SERVICE_ID 앱 ID
IOS_SERVICE_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 iOS 사용의 경우와 달리 사용 방법은 동일합니다. 자세한 내용은 해당 섹션을 참조하세요. 그러나, initialize 메소드의 경우 약간 다릅니다.

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

애플리케이션 만들기

App ID가 이미 있는 경우 이 단계를 건너뛸 수 있습니다.
식별자 추가 App IDs 선택
App ID 유형 선택 App 유형 선택 Continue
애플 로그인 기능을 사용하기 위해 앱 ID를 입력하세요.
켜기 Sign with Apple 기능
클릭 Continue
세부 사항을 확인하고 클릭하세요. Register

애플 로그인에서 계속하는 방법 애플 로그인 (Android) 인증 및 계정 흐름을 계획하고 연결하려면 애플/안드로이드에서 @capgo/capacitor 소셜 로그인 사용 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric for capgo capacitor-native-biometric 구현 세부사항에 대해 두 단계 인증 Two-factor authentication