Android 애플 로그인
이 플러그인에 대한 설치 단계와 전체 마크다운 가이드를 포함한 설정 프롬프트를 복사하세요.
안드로이드에서 애플 로그인은 약간의 해킹입니다. 애플은 안드로이드에서 공식 지원을 제공하지 않기 때문에 Sign in with Apple 안드로이드에서 사용하는 솔루션은 약간의 해킹입니다.
안드로이드에서 현재 Chrome 탭을 사용하여 OAuth2 웹사이트를 표시합니다. 이 접근 방식에는 다음과 같은 문제가 있습니다:
- 구성하기 어려움
- 백엔드가 필요합니다
안드로이드에서 흐름을 이해하는 어려움
안드로이드에서 흐름을 이해하는 방법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를 생성하는 단계
서비스 ID를 생성하는 단계-
애플 개발자 Portal로 로그인하세요. 애플 개발자 Portal.
-
애플 개발자 Portal의 식별자 섹션을 클릭하세요.
Identifiers.
애플 개발자 Portal의 식별자 화면
- __CAPGO_KEEP_0__
App IDs - 앱 ID를 찾을 수 있는지 확인하세요.
- __CAPGO_KEEP_0__
-
앱이 올바르게 구성되어 있는지 확인하세요.
Sign in with Apple앱을 클릭하세요.- 앱 목록에서 앱을 선택하세요.
- 앱이 올바르게 구성되어 있는지 확인하세요.
Sign in with Apple앱이 올바르게 구성되어 있는지 확인하세요.
- 활성화되지 않은 경우 활성화하세요.
- 앱 목록에서 앱을 선택하세요.
-
모두 돌아가기
All Identifiers
-
클릭하여
App Ids그리고 서비스 ID로 이동하세요.Services IDs
-
플러스 버튼 클릭
-
새로운 서비스 ID 추가
-
클릭
Servcice IDs이동Continue
-
설명과 식별자 입력 후 클릭
Continuie.
-
로 사용하고 있습니다.
Register
-
서비스 ID 등록 확인
-
새로 생성된 서비스 ID
Sign in with Apple기능을 활성화합니다.
-
설정하기
Sign In with Apple
-
이것을
Primary App ID__CAPGO_KEEP_0__
-
설정
-
다음 단계로 진행하세요.
Done
-
서비스 설정을 계속하세요.
Continue
-
키를 생성하세요.
Save
-
모두 보기로 돌아가세요.
다음 단계로 진행하세요.-
설정 완료 후 다시 돌아와서 이 섹션을 읽어보세요.
All Identifiers
-
클릭하여
Keys
-
플러스 아이콘을 클릭하여
-
키 이름을 입력하세요
-
클릭
Sign in with Apple이름을 입력하세요Configure
-
기본 App ID를 선택하고 클릭하세요
Save
-
클릭하여 다음 단계로 진행하세요
Continue
-
키 생성에 대한 등록 버튼
Register
-
키 ID 및 다운로드 버튼 화면
-
다운로드한 키 파일을 찾으세요. 백엔드 폴더에 저장하세요.
팀 ID를 가져오는 방법
팀 ID를 가져오는 방법 섹션안드로이드에서 사용하려면 Login with Apple 를 가져와야 합니다. 백엔드에서 사용됩니다. Team ID팀 ID
-
이 웹사이트로 이동하여 아래로 스크롤하세요. 이 웹사이트로 이동하여 아래로 스크롤하세요. 이 웹사이트로 이동하여 아래로 스크롤하세요.
-
개발자 계정에서 팀 ID 위치를 찾으세요.
Team ID
앱 리다이렉트 구성 Redirect back to the app섹션 제목 ‘앱 리다이렉트 구성’
- 이 단계는 앱의 수동 변경이 필요합니다.
AndroidManifest.xml-
파일을 열어보세요. 나는 Android Studio에서 AndroidManifest.xml 파일을 사용할 것입니다.
AndroidStudio
-
Apple과 Android에서 사용하는 소셜 로그인 플러그인을 설정하는 방법
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를 수정하세요
MainActivity-
Android Studio에서 MainActivity.java 파일을 열어주세요
MainActivity
-
MainActivity에 code를 추가하여 깊이 링크를 처리하세요
@Overrideprotected 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 여기
다음 예시를 제공합니다.
- 간단한 JSON 데이터베이스
- 애플 서버에서 JWT를 요청하는 방법
- JWT 검증
이 튜토리얼에서 말한 모든 것을 고려하여, 다음은 어떻게 하면 되는지 설명합니다. env 구성은 다음과 같습니다:
ANDROID_SERVICE_ID= 서비스 IDIOS_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
애플 로그인에서 계속하기
애플 로그인에서 계속하기애플 로그인 on Android를 사용 중이라면 애플 로그인 on Android를 사용 중이라면 인증 및 계정 흐름을 계획하고 사용하는 경우, @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 연결하세요 native capability을 위해 @capgo/capacitor-social-login을 사용하세요 @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login Apple @capgo/capacitor-passkey Apple @capgo/capacitor-passkey 구현 세부 사항 Apple @capgo/capacitor-native-biometric Apple @capgo/capacitor-native-biometric 구현 세부 사항 두 단계 인증 두 단계 인증 구현 세부 사항