ข้อมูลประจำตัวแบบรวมศูนย์สำหรับการลงชื่อเข้าใช้ทางโซเชียล

การตรวจสอบสิทธิ์ทางโซเชียลเป็นขั้นตอนการตรวจสอบสิทธิ์หลายขั้นตอน ซึ่งช่วยให้คุณลงชื่อเข้าใช้บัญชีหรือลิงก์ให้ผู้ใช้ได้ ด้วยข้อเสนอพิเศษที่มีอยู่

ทั้งแพลตฟอร์มดั้งเดิมและเว็บรองรับการสร้างข้อมูลเข้าสู่ระบบซึ่งจะส่งไปยัง signInWithCredential หรือ linkWithCredential เมธอด หรือในแพลตฟอร์มบนเว็บ คุณจะทริกเกอร์กระบวนการตรวจสอบสิทธิ์ผ่านก็ได้ ป๊อปอัปหรือการเปลี่ยนเส้นทาง

Google

มีการกำหนดค่าส่วนใหญ่ไว้แล้วเมื่อใช้ Google Sign-In กับ Firebase แต่คุณต้องตรวจสอบว่าคอมพิวเตอร์ของคุณ คีย์ SHA1 ได้รับการกำหนดค่าเพื่อใช้กับ Android คุณสามารถดูวิธีสร้างคีย์ได้ใน เอกสารการตรวจสอบสิทธิ์

ตรวจสอบว่าช่อง "Google" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase

หากผู้ใช้ลงชื่อเข้าใช้ด้วย Google หลังจากลงทะเบียนบัญชีด้วยตนเองแล้ว ผู้ให้บริการตรวจสอบสิทธิ์จะ เปลี่ยนเป็น Google ตามแนวคิดการตรวจสอบสิทธิ์ Firebase ของผู้ให้บริการที่เชื่อถือได้ คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับ ที่นี่

iOS+ และ Android

ในแพลตฟอร์มเนทีฟ คุณต้องใช้ไลบรารีของบุคคลที่สามเพื่อทริกเกอร์ขั้นตอนการตรวจสอบสิทธิ์

ติดตั้งปลั๊กอิน 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);
}

Google Play Games (Android เท่านั้น)

ตรวจสอบว่า "Play Games" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ทำตามวิธีการเหล่านี้เพื่อตั้งค่าโปรเจ็กต์ Firebase ของ Play Games

ทำตามวิธีการกำหนดค่าบริการเกมของ Play ด้วยแอป Firebase

Android

Future<void> _signInWithPlayGames() async {
  // Get server auth code from 3rd party provider
  // See PR description for details on how you might get the server auth code:
  // https://github.com/firebase/flutterfire/pull/12201#issue-2100392487
  final serverAuthCode = '...';
  final playGamesCredential = PlayGamesAuthProvider.credential(
                                          serverAuthCode: serverAuthCode);

  await FirebaseAuth.instance
    .signInWithCredential(playGamesCredential);
}

Facebook

ก่อนเริ่มต้น ให้ตั้งค่าแอป Facebook Developer แล้วทำตามขั้นตอนการตั้งค่าเพื่อเปิดใช้การเข้าสู่ระบบ Facebook

ตรวจสอบว่า "Facebook" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ที่มีชุดรหัสแอปและข้อมูลลับของ Facebook

iOS+ และ Android

ในแพลตฟอร์มดั้งเดิม จะต้องมีไลบรารีของบุคคลที่สามเพื่อติดตั้ง Facebook SDK และทริกเกอร์ขั้นตอนการตรวจสอบสิทธิ์

ติดตั้งปลั๊กอิน flutter_facebook_auth

คุณจะต้องทำตามขั้นตอนในเอกสารประกอบของปลั๊กอินเพื่อให้แน่ใจว่าทั้งอุปกรณ์ Android และ เริ่มต้น Facebook SDK สำหรับ iOS แล้ว อย่างถูกต้อง เมื่อเสร็จแล้ว ให้เรียกใช้ขั้นตอนการลงชื่อเข้าใช้ สร้างข้อมูลเข้าสู่ระบบ 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 จะให้การสนับสนุนสำหรับการจัดการขั้นตอนการตรวจสอบสิทธิ์โดยอัตโนมัติโดยใช้ รายละเอียดแอปพลิเคชัน Facebook ที่ระบุในคอนโซล Firebase เช่น

สร้างผู้ให้บริการ Facebook โดยระบุขอบเขตสิทธิ์เพิ่มเติม ที่คุณต้องการได้รับจากผู้ใช้

ตรวจสอบว่าได้เพิ่ม URI การเปลี่ยนเส้นทาง OAuth จากคอนโซล Firebase เป็น URI การเปลี่ยนเส้นทาง OAuth ที่ถูกต้อง ในแอป Facebook

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

Apple

iOS ขึ้นไป

ก่อนเริ่มต้น ให้กำหนดค่าการลงชื่อเข้าใช้ด้วย Apple และเปิดใช้ Apple เป็นผู้ให้บริการการลงชื่อเข้าใช้

ถัดไป ให้ดูว่าแอป Runner ของคุณมีปุ่ม "ลงชื่อเข้าใช้ด้วย Apple" แบบพื้นฐาน

Android

ก่อนเริ่มต้น ให้กำหนดค่าการลงชื่อเข้าใช้ด้วย 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);
  }
}

ลงชื่อเข้าใช้แพลตฟอร์ม Apple เท่านั้น

นอกจากนี้ยังสามารถลงชื่อเข้าใช้ Apple บนแพลตฟอร์ม iOS+ ได้ด้วยวิธีต่อไปนี้

// Implement a function that generates a nonce. See iOS documentation for how to create a nonce:
// https://firebase.google.com/docs/auth/ios/apple#sign_in_with_apple_and_authenticate_with_firebase
String rawNonce = createNonce();
// Create a SHA-256 hash of the nonce. Consider using the `crypto` package from the pub.dev registry.
String hashSHA256String = createHashSHA256String(rawNonce);
// Use the hash of the nonce to get the idToken. Consider using the `sign_in_with_apple` plugin from the pub.dev registry.
String idToken = await getIdToken();

final fullName = AppleFullPersonName(
  familyName: 'Name',
  givenName: 'Your',
);
// Use the `rawNonce` and `idToken` to get the credential
final credential = AppleAuthProvider.credentialWithIDToken(
  idToken,
  rawNonce,
  fullName,
);

await FirebaseAuth.instance.signInWithCredential(credential);

เพิกถอนโทเค็นการตรวจสอบสิทธิ์ของ Apple

การลงชื่อเข้าใช้ Apple ในแพลตฟอร์มของ Apple จะแสดงรหัสการให้สิทธิ์ที่ใช้ได้ เพื่อเพิกถอนโทเค็นการตรวจสอบสิทธิ์ของ Apple โดยใช้ revokeTokenWithAuthorizationCode() API

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithApple() async {
  final appleProvider = AppleAuthProvider();

  UserCredential userCredential = await FirebaseAuth.instance.signInWithPopup(appleProvider);
  // Keep the authorization code returned from Apple platforms
  String? authCode = userCredential.additionalUserInfo?.authorizationCode;
  // Revoke Apple auth token
  await FirebaseAuth.instance.revokeTokenWithAuthorizationCode(authCode!);
}

Apple Game Center (Apple เท่านั้น)

ตรวจสอบ "เกมเซ็นเตอร์" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ทำตามวิธีการเหล่านี้สำหรับการตั้งค่าโปรเจ็กต์ Firebase ของ Game Center

คุณต้องเข้าสู่ระบบด้วย Game Center ก่อนจึงจะออกและเข้าสู่ระบบของ Firebase Game Center ผ่าน Firebase ได้ ดูวิธีการ จะประสบความสำเร็จได้อย่างไร

iOS ขึ้นไป

Future<void> _signInWithGameCenter() async {
  final credential = GameCenterAuthProvider.credential();
  await FirebaseAuth.instance
      .signInWithCredential(credential);
}

Microsoft

iOS ขึ้นไป

ก่อนที่คุณจะเริ่มกำหนดค่าการเข้าสู่ระบบ Microsoft สำหรับ iOS และเพิ่มรูปแบบ URL ที่กำหนดเอง ให้กับ Runner ของคุณ (ขั้นตอนที่ 1)

Android

ก่อนที่จะเริ่มกำหนดค่าการเข้าสู่ระบบ Microsoft สำหรับ Android

อย่าลืมเพิ่มลายนิ้วมือ 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);
  }
}

Twitter

ตรวจสอบว่า "Twitter" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ด้วยคีย์ API และชุดข้อมูลลับ API ตรวจสอบ URI การเปลี่ยนเส้นทาง OAuth ของ Firebase (เช่น my-app-12345.firebaseapp.com/__/auth/handler) มีการตั้งค่าเป็น URL เรียกกลับเรื่องการให้สิทธิ์ในหน้าการตั้งค่าของแอปในการกำหนดค่าของแอป Twitter

นอกจากนี้คุณอาจต้องขอการเข้าถึง API เพิ่มเติมโดยขึ้นอยู่กับแอปของคุณ

iOS ขึ้นไป

คุณต้องกำหนดค่า Scheme ของ URL ที่กำหนดเองตามที่อธิบายไว้ในคำแนะนำของ iOS ขั้นตอนที่ 1

Android

หากคุณยังไม่ได้ระบุลายนิ้วมือ 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 และ ที่ "GitHub" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ที่มีการตั้งค่า Client-ID และข้อมูลลับไว้ โดยมีการตั้งค่า URL เรียกกลับในแอป GitHub

iOS+ และ Android

สำหรับแพลตฟอร์มเนทีฟ คุณต้องเพิ่ม google-services.json และ GoogleService-Info.plist

สำหรับ iOS ให้เพิ่มรูปแบบ URL ที่กำหนดเองตามที่อธิบายไว้ในคู่มือ iOS ขั้นตอนที่ 1

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

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

เว็บ

บนเว็บ GitHub SDK ให้การสนับสนุนสำหรับการจัดการขั้นตอนการตรวจสอบสิทธิ์โดยอัตโนมัติโดยใช้ รายละเอียดแอปพลิเคชัน GitHub ที่ระบุไว้ในคอนโซล Firebase ตรวจสอบว่าได้เพิ่ม URL เรียกกลับในคอนโซล Firebase แล้ว เป็น URL เรียกกลับในแอปพลิเคชัน GitHub บน Play Console

เช่น

สร้างผู้ให้บริการ 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);
}

Yahoo

ตรวจสอบว่า "Yahoo" เปิดใช้ผู้ให้บริการการลงชื่อเข้าใช้ในคอนโซล Firebase ด้วยคีย์ API และชุดข้อมูลลับ API และตรวจสอบ URI การเปลี่ยนเส้นทาง Firebase OAuth (เช่น my-app-12345.firebaseapp.com/__/auth/handler) ได้รับการตั้งค่าเป็น URI การเปลี่ยนเส้นทางในการกำหนดค่าเครือข่ายนักพัฒนาซอฟต์แวร์ของ Yahoo ของแอป

iOS ขึ้นไป

ก่อนเริ่มต้น ให้กำหนดค่าการเข้าสู่ระบบ Yahoo สำหรับ iOS และเพิ่มแบบแผน URL ที่กำหนดเอง ให้กับ Runner ของคุณ (ขั้นตอนที่ 1)

Android

ก่อนที่จะเริ่มต้น ให้กำหนดค่าการเข้าสู่ระบบ Yahoo สำหรับ Android

อย่าลืมเพิ่มลายนิ้วมือ 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`

การลิงก์ผู้ให้บริการตรวจสอบสิทธิ์

หากต้องการลิงก์ผู้ให้บริการกับผู้ใช้ปัจจุบัน ให้ใช้วิธีการต่อไปนี้ ลูกดอก รอ FirebaseAuth.instance.signInonymly();

สุดท้าย appleProvider = AppleAuthProvider();

if (kIsWeb) { รอ FirebaseAuth.instance.currentUser?.linkWithPopup(appleProvider);

// นอกจากนี้คุณยังใช้ linkWithRedirect ได้ด้วย } else { รอ FirebaseAuth.instance.currentUser?.linkWithProvider(appleProvider); }

// ตอนนี้ระบบได้อัปเกรดผู้ใช้ที่ไม่ระบุชื่อของคุณให้เชื่อมต่อกับฟีเจอร์ลงชื่อเข้าใช้ด้วย 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