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

이 플러그인의 설치 단계와 전체 마크다운 가이드를 포함한 설정 지시를 복사하세요.

안드로이드에서 애플 로그인은 약간의 해킹입니다. 애플은 안드로이드에서 공식적으로 지원하지 않기 때문에. Sign in with Apple 안드로이드에서 애플 로그인은 약간의 해킹입니다. 애플은 안드로이드에서 공식적으로 지원하지 않기 때문에.

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

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

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

Let me use a diagram to explain the flow on 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를 생성하는 방법

애플 개발자 Portal에 로그인하세요. 애플 개발자 Portal.
애플 개발자 Portal의 식별자 섹션을 클릭하세요. Identifiers.

애플 개발자 Portal의 식별자 화면
1. __CAPGO_KEEP_0__ App IDs
2. 앱 ID를 찾을 수 있는지 확인하세요.
  iOS에서 Apple 로그인을 구성하지 않았다면, 하나를 생성해야 합니다. 저는 이미 하나가 생성되어 있습니다. 사용할 앱 ID는 me.wcaleniewolny.test.ionic.vue. 만약 하나가 없다면, 앱을 생성하는 단계.
앱이 Sign in with Apple 능력을 활성화되어 있는지 확인하세요.
1. 앱을 클릭하세요.
2. 앱이 Sign in with Apple 능력을 활성화되어 있는지 확인하세요.
3. 만약 활성화되지 않았다면 활성화하세요.
모두로 돌아가기 All Identifiers
클릭하세요. App Ids 그리고 Services IDs
새 식별자 만들기
1. 플러스 버튼 클릭
2. 선택하세요. Servcice IDs 클릭하세요. Continue
3. 설명과 식별자 입력 후 클릭 Continuie.
  
  이 identifiers 이것이 clientId 이것을 함수에서 전달하고 백엔드에 전달할 것입니다. initialize 이것을 저장해주세요!!! ANDROID_SERVICE_ID 주의
  이것이 백엔드에 전달될 것입니다.
  
  서비스 ID는 앱 ID와 일치할 필요는 없지만, 서비스 ID를 YOUR_APP_ID.service 로 설정하는 것을 추천합니다. me.wcaleniewolny.test.ionic.vue 앱 ID를 ee.forgr.io.ionic.service2 으로 사용하고 서비스 ID를
4. 으로 사용하고 있습니다. Register
5. 서비스 ID 등록 확인
6. 새로 생성된 서비스 ID 선택 Sign in with Apple 기능을 활성화합니다.
7. 설정하기 Sign In with Apple
8. 이것을 Primary App ID __CAPGO_KEEP_0__
9. 앱 ID를 설정하는 기본 앱 ID 드롭다운
  
  https를 사용하는 백엔드 https를 사용하는 백엔드 백엔드가 Return URLs이 튜토리얼을 계속 진행하기 전에, 이 섹션을 나중에 읽고 백엔드 설정을 완료한 후에 돌아와야 합니다. https://xyz.wcaleniewolny.me/login/callback 리턴 URL과 도메인에 대해 사용할 것입니다. xyz.wcaleniewolny.me 리턴 URL과 도메인에 대해 사용할 것입니다.
10. 다음 단계를 클릭하세요. Done
11. 클릭하여 서비스 설정을 계속하세요. Continue
12. 키 생성 Save

모두로 돌아가세요.

설정 완료 후에 돌아와야 합니다. All Identifiers
클릭하여 Keys
플러스 아이콘을 클릭하여
키 이름을 입력하세요

선택
클릭 Sign in with Apple and Configure
기본 App ID를 선택하고 Save

이 App 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

AndroidManifest.xml 파일을 Android Studio에서 열겠습니다. AndroidStudio

Apple과 Android에서 사용하는 Social Login 플러그인을 설정하는 방법 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>

MainActivity.java 파일을 Android Studio에서 열어주세요 MainActivity

MainActivity.java 파일에 다음 코드를 추가하세요: __CAPGO_KEEP_0__ MainActivity

Add the following code:

Code to add to MainActivity for handling deep links

@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 구역은 다음과 같습니다:

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

앱을 만드는

앱 ID가 아직 없다면 플러스 버튼을 클릭하십시오
선택 App IDs 그리고 계속 클릭
타입 클릭 App 그리고 클릭 Continue
설명과 앱 ID 입력
활성화 Sign with Apple 기능
클릭 Continue
세부 정보를 확인하고 클릭하세요 Register

애플 로그인 Android을 사용 중이라면 애플 로그인 Android 인증 및 계정 흐름을 계획하고 사용하는 경우, 그것을 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login과 연결하세요 Using @capgo/capacitor-social-login을 사용하여 @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, 그리고 두 단계 인증 구현 세부 사항에 대한 두 단계 인증.