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

페이스북

시작하기 전에 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로 로그인" 기능이 있는지 확인합니다.

sign_in_with_apple 플러그인과 crypto 패키지를 설치합니다.

dependencies:
  sign_in_with_apple: ^3.0.0
  crypto: ^3.0.1
import 'dart:convert';
import 'dart:math';

import 'package:crypto/crypto.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:sign_in_with_apple/sign_in_with_apple.dart';

/// Generates a cryptographically secure random nonce, to be included in a
/// credential request.
String generateNonce([int length = 32]) {
  const charset =
      '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._';
  final random = Random.secure();
  return List.generate(length, (_) => charset[random.nextInt(charset.length)])
      .join();
}

/// Returns the sha256 hash of [input] in hex notation.
String sha256ofString(String input) {
  final bytes = utf8.encode(input);
  final digest = sha256.convert(bytes);
  return digest.toString();
}

Future<UserCredential> signInWithApple() async {
  // To prevent replay attacks with the credential returned from Apple, we
  // include a nonce in the credential request. When signing in with
  // Firebase, the nonce in the id token returned by Apple, is expected to
  // match the sha256 hash of `rawNonce`.
  final rawNonce = generateNonce();
  final nonce = sha256ofString(rawNonce);

  // Request credential for the currently signed in Apple account.
  final appleCredential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
    nonce: nonce,
  );

  // Create an `OAuthCredential` from the credential returned by Apple.
  final oauthCredential = OAuthProvider("apple.com").credential(
    idToken: appleCredential.identityToken,
    rawNonce: rawNonce,
  );

  // Sign in the user with Firebase. If the nonce we generated earlier does
  // not match the nonce in `appleCredential.identityToken`, sign in will fail.
  return await FirebaseAuth.instance.signInWithCredential(oauthCredential);
}

편물

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

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithApple() async {
  // Create and configure an OAuthProvider for Sign In with Apple.
  final provider = OAuthProvider("apple.com")
    ..addScope('email')
    ..addScope('name');

  // Sign in the user with Firebase.
  return await FirebaseAuth.instance.signInWithPopup(provider);
}

대안은 signInWithRedirect 를 사용하는 것입니다. 이 경우 브라우저는 앱에서 다른 곳으로 이동하고 getRedirectResult 를 사용하여 앱 시작 중에 인증 결과를 확인해야 합니다.

트위터

API 키 및 API 비밀번호가 설정된 Firebase 콘솔 에서 "Twitter" 로그인 제공자가 활성화되어 있는지 확인합니다.

iOS+ 및 안드로이드

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

twitter_login 플러그인 설치:

dependencies:
  twitter_login: ^4.0.1

twitter_login 의 구성 단계를 주의 깊게 살펴보고 일치하는 URL 체계로 Twitter 개발자 포털 에 콜백 URL을 등록하십시오.

import 'package:twitter_login/twitter_login.dart';

Future<UserCredential> signInWithTwitter() async {
  // Create a TwitterLogin instance
  final twitterLogin = new TwitterLogin(
    apiKey: '<your consumer key>',
    apiSecretKey:' <your consumer secret>',
    redirectURI: '<your_scheme>://'
  );

  // Trigger the sign-in flow
  final authResult = await twitterLogin.login();

  // Create a credential from the access token
  final twitterAuthCredential = TwitterAuthProvider.credential(
    accessToken: authResult.authToken!,
    secret: authResult.authTokenSecret!,
  );

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

편물

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

예를 들어:

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

Future<UserCredential> signInWithTwitter() async {
  // Create a new provider
  TwitterAuthProvider twitterProvider = TwitterAuthProvider();

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

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

깃허브

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

iOS+ 및 안드로이드

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

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

import 'package:github_sign_in/github_sign_in.dart';

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

  return await _auth.signInWithAuthProvider(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);
}