Firebase Authentication의 Outh를 Capacitor에서 이동하는 방법 선택

다음 기사에는 캐피톨에 OAuth를 사용하는 방법이 적혀 있다.
https://zenn.dev/ubie/articles/firebase-auth-hack
Capacitor에 포함된 것은 독립된 WebView이기 때문에 여기에 적힌 바와 같이 Oauuth를 시도하면 다음과 같은 문제가 발생합니다.

- Google などの認証プロバイダは WebView 内でのアクセスを弾く (参考)
- 認証プロバイダからのコールバックが端末のデフォルトブラウザで開かれてしまい、ネイティブアプリに戻ってこれない

이 과제를 해결하기 위해'그래도 웹뷰에서 인증하고 싶다'는 것도 하나의 방법이다Capacitor 플러그인을 함께 사용하면'인증 제공자 앱(예를 들어 페이스북 로그인 시 페이스북 앱)을 사용하는 경우 앱을 통해 인증을 하지 않으면 웹뷰를 통해 인증'등의 처리를 할 수 있다.

Sign in With Apple

https://github.com/capacitor-community/apple-sign-in 웹 또는 iOS에서 Sign in With Apple을 사용할 수 있습니다.이거랑 Firebase Authentication 조합해보세요.
다음과 같이 진행할 수 있다.

// 1. SignInWithAppleを行い、ログイントークンを取得
const appleLogin: SignInWithAppleResponse = await SignInWithApple.authorize().catch(() => undefined);

if (appleLogin === undefined) {
  throw 'ログインが行われませんでした';
}

// 2. Firebase AuthenticationのOAuthProviderにトークンをセットしてFirebaseで利用できる形式に
const provider = new OAuthProvider('apple.com');
const credential = provider.credential({
  idToken: appleLogin.response.identityToken,
});

if (type === 'new') {
  // 3. OAuthProviderを用いて、ユーザの作成
  const currentUser = await signInWithCredential(this.afAuth, credential)
} else {
  // （もしくは既存ユーザにログインを追加）
  const currentUser = await linkWithCredential(this.afAuth.currentUser, credential)
}

Outh의 영패를Firebase AuthenticationOAuthProvider에 설정하면'WebView 리디렉션'과 같은 처리를 할 수 있다.

Facebook Login

https://github.com/capacitor-community/facebook-login.

// 1. Facebookログインを行い、ログイントークンを取得
const FACEBOOK_PERMISSIONS = ['email', 'public_profile'];
const event = await FacebookLogin.login({
  permissions: FACEBOOK_PERMISSIONS,
}).catch(() => undefined);

if (event === undefined) {
  throw 'ログインが行われませんでした';
}

// 2. Firebase AuthenticationのFacebookAuthProviderにトークンをセットしてFirebaseで利用できる形式に
const credential = FacebookAuthProvider.credential(event.accessToken.token);

if (type === 'new') {
// 3. OAuthProviderを用いて、ユーザの作成
const currentUser = await signInWithCredential(this.afAuth, credential)
} else {
  // （もしくは既存ユーザにログインを追加）
  const currentUser = await linkWithCredential(this.afAuth.currentUser, credential)
}

FacebookAuthProvider와 new OAuthProvider('facebook.com')는 같다.

FacebookAuthProvider

GithubAuthProvider

GoogleAuthProvider

TwitterAuthProvider

Firebase Authentication에서 미리 준비한 것이기 때문에 Sign in With Apple보다 쉽게 구현할 수 있습니다.그 외의 절차는 모두 같다.

Google Auth

https://github.com/CodetrixStudio/CapacitorGoogleAuth.다만, Google Auth에 해당되는 제품이 없기 때문에 대개 이렇기 때문에 실행 코드 없이 작성했습니다.

// 1. SignInWithAppleを行い、ログイントークンを取得
const googleUser = await GoogleAuth.signIn().catch(() => undefined);

if (googleUser === undefined) {
  throw 'ログインが行われませんでした';
}

// 2. Firebase AuthenticationのOAuthProviderにトークンをセットしてFirebaseで利用できる形式に
const credential = GoogleAuthProvider.credential(googleUser.authentication.idToken);

if (type === 'new') {
  // 3. OAuthProviderを用いて、ユーザの作成
  const currentUser = await signInWithCredential(this.afAuth, credential)
} else {
  // （もしくは既存ユーザにログインを追加）
  const currentUser = await linkWithCredential(this.afAuth.currentUser, credential)
}

총결산

상기 플러그인을 사용하는 방법은 모든 플러그인에 대한 로컬 행위 설정도 있고 번거롭기도 합니다.그러나 웹 버전과 로컬 응용 버전의 행위는 같은 코드로 실현할 수 있어 개인이 좋아하는 수법이다.참고로 이것은 웹 퍼스트에서 최소한의 플러그인에 의존하는 방법이다
https://github.com/robingenz/capacitor-firebase/blob/main/packages/authentication/README.md
채택도 가능합니다.어떻게 실행할지 상상하면서 방법을 고르고 싶어요.
그럼 안녕히 계세요.