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

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

안드로이드에서 애플 로그인은 약간의 장난감입니다. 애플은 안드로이드에서 공식적으로 지원하지 않기 때문에. 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를 생성하는 방법

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

애플 개발자 Portal의 식별자 화면
1. 이 필드의 값이 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 백엔드에 전달할 서비스 ID를 저장하세요!! ANDROID_SERVICE_ID 주의
  이것은 백엔드에 전달할 서비스 ID입니다.
  
  서비스 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 기능 활성화
7. 설정 Sign In with Apple
8. 이것을 Primary App ID 애플 로그인 설정에서 이전 단계에서 구성한 App ID로 설정하십시오
9. 이미지 호스팅을 위해 사용할 백엔드 도메인을 추가하십시오.
  
  이 백엔드 는 HTTPS로 실행되어야 합니다. 그리고 Return URLs이 튜토리얼을 계속 진행하기 전에, 이 섹션을 나중에 읽고 백엔드 설정을 하기 전에 돌아와야 할 수도 있습니다. https://xyz.wcaleniewolny.me/login/callback 리턴 URL과 도메인에 대해 사용할 것입니다. xyz.wcaleniewolny.me 리턴 URL과 도메인에 대해 사용할 것입니다.
10. 다음 단계로 진행하기 전에 데이터를 확인하고 클릭하세요. Done
11. 클릭하여 서비스 설정을 계속하세요. Continue
12. 키 생성 Save

모두로 돌아가기

도메인 및 리턴 URL 설정 확인 All Identifiers
클릭하여 Keys
플러스 아이콘을 클릭하여
키 이름을 입력하세요

클릭
이름을 입력하세요 Sign in with Apple 선택 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수정하세요

파일을 열어보세요. 나는 Android Studio에서 AndroidManifest.xml

AndroidManifest.xml 파일을 사용합니다. AndroidStudio

Apple과 Android의 MainActivity 그리고 다음 Intent filter를 추가하세요

MainActivity에 다음 Intent filter code를 추가하세요

<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

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

MainActivity에 다음 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);
}

백엔드 구성

A backend is required for Android, but configuring a backend will also impact IOS. An example backend is provided 여기

This example provides the following:

A simple JSON database
Apple의 서버에서 JWT를 요청하는 방법
A simple JWT verification

이 튜토리얼에서 설명한 모든 것을 고려하여, 다음과 같이 진행합니다. 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/capacitor-social-login 사용자 @capgo/capacitor-social-login implementation detail @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-passkey 구현 세부 사항에 대한 @capgo/capacitor-passkey @capgo/capacitor-native-biometric 구현 세부 사항에 대한 @capgo/capacitor-native-biometric, 그리고 두 단계 인증 구현 세부 사항에 대한 두 단계 인증.