애플 로그인 on Android

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

안드로이드에서 애플 로그인은 약간의 장난감입니다. 애플은 안드로이드에서 공식적으로 지원하지 않습니다. Sign in with 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를 생성합니다.

로그인하여 애플 개발자 포털.
애플 개발자 포털 Identifiers 섹션 Identifiers.

애플 개발자 포털 Identifiers 화면
1. 앱 ID를 찾을 수 있는지 확인해 보세요. 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 서비스 ID가 clientId 백엔드 함수에 전달할 initialize AND ANDROID_SERVICE_ID 서비스 ID를
  서비스 ID를 저장하세요!!!
  
  서비스 ID는 App ID와 일치할 필요는 없지만, 서비스 ID를 App ID와 일치시키는 것을 추천합니다. YOUR_APP_ID.service . me.wcaleniewolny.test.ionic.vue 위치 ID를 사용하고 있지만 ee.forgr.io.ionic.service2 서비스 ID로
4. 세부 사항을 확인하고 클릭하세요. Register
5. 새로 생성된 서비스에 클릭하세요.
6. 기능을 활성화하세요. Sign in with Apple Sign in with Apple 기능을 활성화하는
7. Configure 버튼을 클릭하여 Sign in with Apple을 구성하세요. Sign In with Apple
8. 이러한 것을 확인하십시오. Primary App ID __CAPGO_KEEP_0__을 __CAPGO_KEEP_1__에 설정하십시오.
9. 이미지 호스팅을 위해 사용할 도메인을 추가하십시오.
  
  이 백엔드 는 HTTPS로 실행되어야 합니다. 반환 URL에 대한 __CAPGO_KEEP_2__에 대한 정보는 이 튜토리얼의 다음 섹션을 읽고 백엔드 설정을 완료한 후에 다시 돌아와야 합니다. 이 튜토리얼의 경우 __CAPGO_KEEP_2__을 반환 URL로 사용하겠습니다. Return URLsprotectedTokens https://xyz.wcaleniewolny.me/login/callback protectedTokens xyz.wcaleniewolny.me 도메인을 확인하세요. 다음을 클릭하세요.
10. 데이터를 확인하고 클릭하세요. Done
11. 서비스 설정을 위해 Continue
12. 설정 완료를 위해 Save

키를 생성합니다.

모두로 돌아가세요. All Identifiers
설정 완료를 위해 클릭하세요. Keys
플러스 아이콘을 클릭하세요
키 이름을 입력하세요

선택
클릭 Sign in with Apple Apple Sign in을 위한 키를 설정하고 구성하세요 Configure
Apple Sign in을 위한 키를 활성화하고 구성하세요 Save

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

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

팀 ID를 가져오는 방법

안드로이드에서 사용하기 위해 Login with Apple 이 키를 백엔드에서 사용합니다. Team ID팀 ID를 가져오려면

이 웹사이트로 이동하세요 이 키는 백엔드에서 사용됩니다. __CAPGO_KEEP_0__
__CAPGO_KEEP_1__ Team ID

__CAPGO_KEEP_3__

__CAPGO_KEEP_5__ Redirect back to the app__CAPGO_KEEP_6__

__CAPGO_KEEP_7__ AndroidManifest.xml

__CAPGO_KEEP_8__ AndroidStudio

__CAPGO_KEEP_10__ MainActivity __CAPGO_KEEP_11__

<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

__CAPGO_KEEP_0__을 열어주세요 MainActivity

다음과 같은 code을 추가하세요

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

백엔드 구성

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

This example provides the following:

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

__CAPGO_KEEP_0__ env __CAPGO_KEEP_0__

ANDROID_SERVICE_ID __CAPGO_KEEP_0__
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"
}

플러그인 사용

기능 사용 방법 login 기능 사용 방법은 IOS와 동일합니다. 더 많은 정보를 확인하려면 해당 섹션을 참조하세요. 그러나, initialize 메소드 변경이 조금 있습니다.

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

앱을 만들기 위해

앱 ID가 아직 없는 경우 플러스 버튼을 클릭하십시오
Select App IDs and click continue
타입 클릭 App 클릭 Continue
설명과 앱 ID를 입력하세요
활성화 Sign with Apple 기능
클릭 Continue
상세 내용 확인 후 클릭 Register

애플 로그인과 같은 인증 및 계정 흐름을 계획하고 있다면 애플 로그인 애플 로그인과 같은 인증 및 계정 흐름을 계획하고 있다면 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 사용하세요. @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-passkey @capgo/capacitor-passkey @capgo/capacitor-passkey @capgo/capacitor-passkey @capgo/capacitor-native-생체인식 for the implementation detail in @capgo/capacitor-native-생체인식, and 두 단계 인증 for the implementation detail in 두 단계 인증.