애플 로그인 on Android

설치 단계 및 이 플러그인의 전체 마크다운 가이드가 포함된 설정 프롬프트를 복사하세요.

애플 로그인은 안드로이드에서 해키입니다. 애플은 안드로이드에 대한 공식 지원을 제공하지 않습니다. Sign in with Apple 안드로이드에서 작동하도록 하려면 약간의 해킹이 필요합니다.

현재 안드로이드는 OAuth2 웹사이트를 표시하기 위해 Chrome 탭을 사용하고 있습니다. 이 접근 방식에는 다음과 같은 문제점이 있습니다:

어려운 설정
백엔드가 필요합니다

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

안드로이드에서 로그인 흐름 다이어그램

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를 생성합니다.

서비스 ID 생성

로그인 Apple Developer Portal.
Click on Identifiers.

이런 화면을 보실 수 있습니다.
1. 이 필드가 App IDs
2. 앱 ID가 올바르게 설정되어 있는지 확인하세요.
  IOS용 Apple 로그인 설정이 아직 안되어 있다면, 하나를 만들어야 합니다. 저는 이미 하나를 만들었습니다. 사용할 앱 ID는 me.wcaleniewolny.test.ionic.vue. 만약 하나가 없다면, 앱 만들기 단계.
__CAPGO_KEEP_0__ capability이 활성화되어 있는지 확인하세요. Sign in with Apple __CAPGO_KEEP_0__ 앱에 대한 __CAPGO_KEEP_0__ 기능이 활성화되어 있는지 확인하세요.
1. __CAPGO_KEEP_0__ 앱을 클릭하세요.
2. __CAPGO_KEEP_0__ capability이 활성화되어 있는지 확인하세요. Sign in with Apple __CAPGO_KEEP_0__ capability이 활성화되어 있는지 확인하세요.
3. __CAPGO_KEEP_0__ capability이 활성화되어 있지 않다면 활성화하세요.
__CAPGO_KEEP_0__으로 돌아가세요. All Identifiers
__CAPGO_KEEP_0__을 클릭하세요. App Ids __CAPGO_KEEP_0__으로 이동하세요. Services IDs
새로운 서비스 ID 섹션으로 이동하기
1. 서비스 ID 생성
2. 플러스 버튼 클릭 Servcice IDs 새로운 서비스 ID 추가 Continue
3. 선택 Continuie.
  
  주의사항이 있습니다. identifiers 이것이 될 것입니다. clientId 이것을 백엔드에 전달할 것입니다. initialize 함수 AND ANDROID_SERVICE_ID 백엔드에 대해.
  이것을 저장해 주세요!!!
  
  서비스 ID는 앱 ID와 일치할 필요는 없지만, 서비스 ID를 YOUR_APP_ID.service 로 설정하는 것을 추천합니다. me.wcaleniewolny.test.ionic.vue 이것을 사용하여 ee.forgr.io.ionic.service2 내 앱 ID를 사용하고
4. 를 서비스 ID로 사용하고 있습니다. 이에 대해 다시 한번 확인하고 클릭하세요. Register
5. 새로 생성된 서비스 클릭
6. 활성화 Sign in with Apple 선택
7. 설정 Sign In with Apple
8. 애플리케이션 ID가 이전 단계에서 구성된 것과 일치하도록 Primary App ID 설정
9. 백엔드 호스팅할 도메인을 추가
  
  이 백엔드 는 HTTPS에서 실행되어야 합니다. 반환 URL에 대해 다시 읽고 백엔드 구성 후에 이 섹션을 읽어보세요. 이 튜토리얼을 위해, 나는 를 반환 URL로 사용하고 Return URLs를 도메인으로 사용합니다. 다음을 클릭하세요. https://xyz.wcaleniewolny.me/login/callback 데이터를 확인하고 xyz.wcaleniewolny.me 확인을 클릭하세요.
10. 도메인 및 반환 URL 구성 확인 Done
11. 설정 Continue
12. 클릭하여 Save

키 생성

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

이 이름은 중요하지 않습니다. 아무거나 넣으세요.
__CAPGO_KEEP_2__ Sign in with Apple __CAPGO_KEEP_3__ Configure
__CAPGO_KEEP_5__ Save

__CAPGO_KEEP_9__
Click on Continue
Click on Register
키 ID를 복사하고 키를 다운로드하세요.

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

팀 ID를 가져 오기

Capgo를 사용하기 위해 Login with Apple 안드로이드에서 사용하기 위해 Team ID. 백엔드에서 사용됩니다.

Capgo 개발자 계정으로 이 웹사이트로 스크롤 다운
개발자 계정에서 Team ID

앱 리디렉션을 구성하기

백엔드에서 수행하는 단계를 보셨듯이 Redirect back to the app.이 작업은 앱의 수동 변경이 필요합니다.

Modify the AndroidManifest.xml

Android Studio에서 사용할 AndroidStudio

Find the 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>

Modify the MainActivity

앱을 열어주세요. MainActivity

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를 검증하는 간단한 방법

= App ID env 클립보드에 복사

ANDROID_SERVICE_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"
}

= App ID

The usage of the login 기능의 사용은 IOS와 동일합니다. 자세한 정보는 해당 섹션을 참조하세요. HOWEVER, initialize method의 변경은 약간 있습니다.

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

앱을 생성하는 중입니다

App ID가 아직 없는 경우 플러스 버튼을 클릭하십시오
선택 App IDs 계속하기를 클릭하십시오
종류를 클릭하십시오 App 계속하기를 클릭하십시오 Continue
__CAPGO_KEEP_0__ 설명과 앱 ID를 입력하세요.
__CAPGO_KEEP_1__ Sign with Apple __CAPGO_KEEP_2__
__CAPGO_KEEP_3__ Continue
앱 등록을 위해 __CAPGO_KEEP_5__ 버튼을 클릭하세요. Register

__CAPGO_KEEP_7__ 사용 중입니다. Android에서 Apple 로그인 인증 및 계정 흐름을 계획하고 연결하세요. @capgo/capacitor-social-login을 사용하여 @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의 구현 세부 정보를 사용하여 두 가지 인증 방법을 사용합니다. Two-factor authentication Two-factor authentication의 구현 세부 정보를 사용하여