Google I/O 2022에서 Firebase의 새로운 기능을 확인하세요. 자세히 알아보기

연합 ID 및 소셜 로그인

소셜 인증은 사용자를 계정에 로그인하거나 기존 계정과 연결할 수 있는 다단계 인증 흐름입니다.

기본 플랫폼과 웹 모두 자격 증명 생성을 지원하며 자격 증명은 signInWithCredential 또는 linkWithCredential 메서드에 전달할 수 있습니다. 또는 웹 플랫폼에서 팝업 또는 리디렉션을 통해 인증 프로세스를 트리거할 수 있습니다.

Google

Firebase에서 Google 로그인을 사용할 때 대부분의 구성이 이미 설정되어 있지만 Android에서 사용하도록 컴퓨터의 SHA1 키가 구성되어 있는지 확인해야 합니다. 인증 문서 에서 키를 생성하는 방법을 볼 수 있습니다.

Firebase 콘솔 에서 'Google' 로그인 제공업체가 활성화되어 있는지 확인합니다.

사용자가 이미 수동으로 계정을 등록한 후 Google로 로그인하면 신뢰할 수 있는 공급자라는 Firebase 인증 개념으로 인해 인증 공급자가 자동으로 Google로 변경됩니다. 이에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

iOS+ 및 안드로이드

기본 플랫폼에서 인증 흐름을 트리거하려면 타사 라이브러리가 필요합니다.

공식 google_sign_in 플러그인을 설치합니다.

설치되면 로그인 흐름을 트리거하고 새 자격 증명을 만듭니다.

import 'package:google_sign_in/google_sign_in.dart';

Future<UserCredential> signInWithGoogle() async {
  // Trigger the authentication flow
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

  // Obtain the auth details from the request
  final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;

  // Create a new credential
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth?.accessToken,
    idToken: googleAuth?.idToken,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(credential);
}

편물

웹에서 Firebase SDK는 Firebase 프로젝트를 사용하여 인증 흐름을 자동으로 처리하기 위한 지원을 제공합니다. 예를 들어:

사용자로부터 얻고자 하는 추가 권한 범위 를 제공하여 Google 인증 공급자를 만듭니다.

GoogleAuthProvider googleProvider = GoogleAuthProvider();

googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
googleProvider.setCustomParameters({
  'login_hint': 'user@example.com'
});

signInWithPopup 메서드에 자격 증명을 제공합니다. 그러면 사용자에게 프로젝트에 로그인하라는 새 창이 표시됩니다. 또는 signInWithRedirect 를 사용하여 동일한 창에서 인증 프로세스를 유지할 수 있습니다.

Future<UserCredential> signInWithGoogle() async {
  // Create a new provider
  GoogleAuthProvider googleProvider = GoogleAuthProvider();

  googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
  googleProvider.setCustomParameters({
    'login_hint': 'user@example.com'
  });

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(googleProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(googleProvider);
}

구글 플레이 게임

Play 게임 로그인을 사용하여 Android 게임에서 사용자를 인증할 수 있습니다.

기계적 인조 인간

Android에서 Google 설정 지침을 따른 다음 Firebase 앱 정보로 Play 게임 서비스 를 구성합니다.

다음은 로그인 흐름을 트리거하고 새 자격 증명을 만들고 사용자를 로그인시킵니다.

final googleUser = await GoogleSignIn(
  signInOption: SignInOption.games,
).signIn();

final googleAuth = await googleUser?.authentication;

if (googleAuth != null) {
  // Create a new credential
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth.accessToken,
    idToken: googleAuth.idToken,
  );

  // Once signed in, return the UserCredential
  await _auth.signInWithCredential(credential);
}

페이스북

시작하기 전에 Facebook 개발자 앱 을 설정하고 설정 프로세스에 따라 Facebook 로그인을 활성화하세요.

Firebase 콘솔 에서 'Facebook' 로그인 제공업체가 활성화되어 있는지 확인합니다. Facebook 앱 ID 및 비밀 설정으로.

iOS+ 및 안드로이드

기본 플랫폼에서 Facebook SDK를 설치하고 인증 흐름을 트리거하려면 타사 라이브러리가 필요합니다.

flutter_facebook_auth 플러그인을 설치합니다.

Android 및 iOS Facebook SDK가 모두 올바르게 초기화되었는지 확인하려면 플러그인 설명서의 단계를 따라야 합니다. 완료되면 로그인 흐름을 트리거하고 Facebook 자격 증명을 만들고 사용자를 로그인합니다.

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

Future<UserCredential> signInWithFacebook() async {
  // Trigger the sign-in flow
  final LoginResult loginResult = await FacebookAuth.instance.login();

  // Create a credential from the access token
  final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(loginResult.accessToken.token);

  // Once signed in, return the UserCredential
  return FirebaseAuth.instance.signInWithCredential(facebookAuthCredential);
}

편물

웹에서 Firebase SDK는 Firebase 콘솔에서 제공되는 Facebook 애플리케이션 세부정보를 사용하여 인증 흐름을 자동으로 처리하기 위한 지원을 제공합니다. 예를 들어:

사용자로부터 얻고자 하는 추가 권한 범위 를 제공하여 Facebook 공급자를 만듭니다.

Firebase 콘솔의 OAuth 리디렉션 URI가 Facebook 앱에서 유효한 OAuth 리디렉션 URI로 추가되었는지 확인합니다.

FacebookAuthProvider facebookProvider = FacebookAuthProvider();

facebookProvider.addScope('email');
facebookProvider.setCustomParameters({
  'display': 'popup',
});

signInWithPopup 메서드에 자격 증명을 제공합니다. 그러면 사용자에게 Facebook 애플리케이션에 로그인하라는 메시지가 표시되는 새 창이 표시됩니다.

Future<UserCredential> signInWithFacebook() async {
  // Create a new provider
  FacebookAuthProvider facebookProvider = FacebookAuthProvider();

  facebookProvider.addScope('email');
  facebookProvider.setCustomParameters({
    'display': 'popup',
  });

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(facebookProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(facebookProvider);
}

사과

iOS+

시작하기 전에 Apple로 로그인을 구성 하고 Apple을 로그인 공급자로 활성화 합니다.

그런 다음 Runner 앱에 "Apple로 로그인" 기능이 있는지 확인합니다.

기계적 인조 인간

시작하기 전에 Apple로 로그인을 구성 하고 Apple을 로그인 공급자로 활성화 합니다.

편물

시작하기 전에 Apple로 로그인을 구성 하고 Apple을 로그인 공급자로 활성화 합니다.

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithApple() async {
  final appleProvider = AppleAuthProvider();
  if (kIsWeb) {
    await FirebaseAuth.instance.signInWithPopup(appleProvider);
  } else {
    await FirebaseAuth.instance.signInWithProvider(appleProvider);
  }
}

마이크로소프트

iOS+

시작하기 전에 iOS용 Microsoft 로그인을 구성 하고 사용자 지정 URL 구성표를 Runner에 추가합니다(1단계) .

기계적 인조 인간

시작하기 전에 Android용 Microsoft 로그인을 구성하십시오 .

앱의 SHA-1 지문을 추가하는 것을 잊지 마십시오.

편물

시작하기 전에 웹용 Microsoft 로그인을 구성하십시오 .

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithMicrosoft() async {
  final microsoftProvider = MicrosoftAuthProvider();
  if (kIsWeb) {
    await FirebaseAuth.instance.signInWithPopup(microsoftProvider);
  } else {
    await FirebaseAuth.instance.signInWithProvider(microsoftProvider);
  }
}

트위터

API 키 및 API 비밀번호가 설정된 Firebase 콘솔 에서 "Twitter" 로그인 제공자가 활성화되어 있는지 확인합니다. Firebase OAuth 리디렉션 URI(예: my-app-12345.firebaseapp.com/__/auth/handler)가 Twitter 앱 구성의 앱 설정 페이지에서 승인 콜백 URL로 설정되어 있는지 확인합니다.

또한 앱에 따라 상승된 API 액세스 를 요청해야 할 수도 있습니다.

iOS+

iOS 가이드 1단계에 설명된 대로 사용자 정의 URL 구성표를 구성해야 합니다.

기계적 인조 인간

앱의 SHA-1 지문을 아직 지정하지 않은 경우 Firebase 콘솔의 설정 페이지 에서 지정합니다. 앱의 SHA-1 지문을 가져오는 방법에 대한 자세한 내용은 클라이언트 인증 을 참조하세요.

편물

즉시 사용할 수 있습니다.

import 'package:firebase_auth/firebase_auth.dart';

Future<void> _signInWithTwitter() async {
  TwitterAuthProvider twitterProvider = TwitterAuthProvider();

  if (kIsWeb) {
    await FirebaseAuth.instance.signInWithPopup(twitterProvider);
  } else {
    await FirebaseAuth.instance.signInWithProvider(twitterProvider);
  }
}

깃허브

GitHub 개발자 설정 에서 OAuth 앱을 설정했고 GitHub 앱에 설정된 콜백 URL과 함께 클라이언트 ID 및 비밀이 설정된 Firebase 콘솔 에서 "GitHub" 로그인 공급자가 활성화되어 있는지 확인합니다.

iOS+ 및 안드로이드

기본 플랫폼의 경우 google-services.jsonGoogleService-Info.plist 를 추가해야 합니다.

iOS 의 경우 iOS 가이드 1단계에 설명된 대로 사용자 지정 URL 체계를 추가합니다.

Future<UserCredential> signInWithGitHub() async {
  // Create a new provider
  GithubAuthProvider githubProvider = GithubAuthProvider();

  return await FirebaseAuth.instance.signInWithProvider(githubProvider);
}

편물

웹에서 GitHub SDK는 Firebase 콘솔에 제공된 GitHub 애플리케이션 세부정보를 사용하여 인증 흐름을 자동으로 처리하는 기능을 지원합니다. Firebase 콘솔의 콜백 URL이 개발자 콘솔의 GitHub 애플리케이션에 콜백 URL로 추가되었는지 확인합니다.

예를 들어:

GitHub 공급자를 만들고 signInWithPopup 메서드에 자격 증명을 제공합니다. 그러면 사용자에게 GitHub 애플리케이션에 로그인하라는 새 창이 표시됩니다.

Future<UserCredential> signInWithGitHub() async {
  // Create a new provider
  GithubAuthProvider githubProvider = GithubAuthProvider();

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(githubProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(githubProvider);
}

야후

API 키 및 API 비밀번호가 설정된 Firebase 콘솔 에서 "Yahoo" 로그인 제공자가 활성화되어 있는지 확인합니다. 또한 Firebase OAuth 리디렉션 URI(예: my-app-12345.firebaseapp.com/__/auth/handler)가 앱의 Yahoo 개발자 네트워크 구성에서 리디렉션 URI로 설정되어 있는지 확인합니다.

iOS+

시작하기 전에 iOS용 Yahoo 로그인을 구성 하고 사용자 지정 URL 구성표를 Runner에 추가합니다(1단계) .

기계적 인조 인간

시작하기 전에 Android용 Yahoo 로그인을 구성 하십시오.

앱의 SHA-1 지문을 추가하는 것을 잊지 마십시오.

편물

즉시 사용할 수 있습니다.

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithYahoo() async {
  final yahooProvider = YahooAuthProvider();
  if (kIsWeb) {
    await _auth.signInWithPopup(yahooProvider);
  } else {
    await _auth.signInWithProvider(yahooProvider);
  }
}

OAuth 액세스 토큰 사용

AuthProvider를 사용하여 다음 요청을 수행하여 공급자와 연결된 액세스 토큰을 검색할 수 있습니다.

final appleProvider = AppleAuthProvider();

final user = await FirebaseAuth.instance.signInWithProvider(appleProvider);
final accessToken = user.credential?.accessToken;

// You can send requests with the `accessToken`

인증 공급자 연결

공급자를 현재 사용자에게 연결하려면 다음 방법을 사용할 수 있습니다. ```dart await FirebaseAuth.instance.signInAnonymously();

최종 appleProvider = AppleAuthProvider();

if (kIsWeb) { FirebaseAuth.instance.currentUser?.linkWithPopup(appleProvider)를 기다립니다.

// linkWithRedirect 를 사용할 수도 있습니다. } else { await FirebaseAuth.instance.currentUser?.linkWithProvider(appleProvider); }

// 이제 익명의 사용자가 Sign In With Apple ```로 연결할 수 있도록 업그레이드되었습니다.

공급자에게 재인증

최근 로그인이 필요한 민감한 작업에 대한 새로운 자격 증명을 검색하는 데 사용할 수 있는 reauthenticateWithProvider 와 동일한 패턴을 사용할 수 있습니다.

final appleProvider = AppleAuthProvider();

if (kIsWeb) {
  await FirebaseAuth.instance.currentUser?.reauthenticateWithPopup(appleProvider);
  
  // Or you can reauthenticate with a redirection
  // await FirebaseAuth.instance.currentUser?.reauthenticateWithRedirect(appleProvider);
} else {
  await FirebaseAuth.instance.currentUser?.reauthenticateWithProvider(appleProvider);
}

// You can now perform sensitive operations