ตรวจสอบการใช้ Yahoo ด้วย JavaScript

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

ก่อนที่คุณจะเริ่ม

หากต้องการลงชื่อเข้าใช้ผู้ใช้โดยใช้บัญชี Yahoo คุณต้องเปิดใช้งาน Yahoo เป็นผู้ให้บริการลงชื่อเข้าใช้สำหรับโครงการ Firebase ของคุณก่อน:

  1. เพิ่ม Firebase ในโครงการ JavaScript ของคุณ
  2. ใน คอนโซล Firebase ให้เปิดส่วน การตรวจสอบสิทธิ์
  3. บนแท็บ วิธีการลงชื่อเข้า ใช้ ให้เปิดใช้งานผู้ให้บริการ Yahoo
  4. เพิ่ม รหัสไคลเอ็นต์ และ รหัสลับไคลเอ็นต์ จากคอนโซลนักพัฒนาซอฟต์แวร์ของผู้ให้บริการรายนั้นลงในการกำหนดค่าผู้ให้บริการ:
    1. หากต้องการลงทะเบียนไคลเอ็นต์ Yahoo OAuth ให้ปฏิบัติตามเอกสารสำหรับนักพัฒนา Yahoo ใน การลงทะเบียนเว็บแอปพลิเคชันกับ Yahoo

      อย่าลืมเลือกสิทธิ์ OpenID Connect API สองรายการ: profile และ email

    2. เมื่อลงทะเบียนแอพกับผู้ให้บริการเหล่านี้ อย่าลืมลงทะเบียนโดเมน *.firebaseapp.com สำหรับโปรเจ็กต์ของคุณเป็นโดเมนการเปลี่ยนเส้นทางสำหรับแอพของคุณ
  5. คลิก บันทึก

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK

หากคุณกำลังสร้างเว็บแอป วิธีที่ง่ายที่สุดในการตรวจสอบผู้ใช้ของคุณด้วย Firebase โดยใช้บัญชี Yahoo ของพวกเขาคือการจัดการขั้นตอนการลงชื่อเข้าใช้ทั้งหมดด้วย Firebase JavaScript SDK

หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนเหล่านี้

  1. สร้างอินสแตนซ์ของ OAuthProvider โดยใช้ ID ผู้ให้บริการ yahoo.com

    Web modular API

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. ทางเลือก : ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งพร้อมกับคำขอ OAuth

    Web modular API

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Web namespaced API

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    สำหรับพารามิเตอร์ที่ Yahoo รองรับ โปรดดู เอกสาร Yahoo OAuth โปรดทราบว่าคุณไม่สามารถส่งพารามิเตอร์ที่ต้องใช้ Firebase ด้วย setCustomParameters() พารามิเตอร์เหล่านี้คือ client_id , เปลี่ยนเส้นทาง_uri , response_type , ขอบเขต และ state

  3. ทางเลือก : ระบุขอบเขต OAuth 2.0 เพิ่มเติมนอกเหนือจาก profile และ email ที่คุณต้องการขอจากผู้ให้บริการการตรวจสอบสิทธิ์ หากแอปพลิเคชันของคุณต้องการการเข้าถึงข้อมูลส่วนตัวผู้ใช้จาก Yahoo API คุณจะต้องขอสิทธิ์ไปยัง Yahoo API ภายใต้ สิทธิ์ของ API ในคอนโซลนักพัฒนาของ Yahoo ขอบเขต OAuth ที่ขอจะต้องตรงกันทุกประการกับขอบเขตที่กำหนดค่าไว้ล่วงหน้าในสิทธิ์ API ของแอป ตัวอย่างเช่น หากขอสิทธิ์การเข้าถึงแบบอ่าน/เขียนให้กับผู้ติดต่อของผู้ใช้และกำหนดค่าไว้ล่วงหน้าในสิทธิ์ API ของแอป จะต้องส่ง sdct-w แทนขอบเขต OAuth แบบอ่านอย่างเดียว sdct-r มิฉะนั้นโฟลว์จะล้มเหลวและข้อผิดพลาดจะแสดงต่อผู้ใช้ปลายทาง

    Web modular API

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    Web namespaced API

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    หากต้องการเรียนรู้เพิ่มเติม โปรดดู เอกสารขอบเขตของ Yahoo

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

    • หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป ให้โทร signInWithPopup :

      Web modular API

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

      Web namespaced API

      firebase.auth().signInWithPopup(provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          /** @type {firebase.auth.OAuthCredential} */
          const credential = result.credential;
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          var accessToken = credential.accessToken;
          var idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    • หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ ให้โทร signInWithRedirect :

    ปฏิบัติตาม แนวทางปฏิบัติที่ดีที่สุด เมื่อใช้ signInWithRedirect , linkWithRedirect หรือ reauthenticateWithRedirect

      firebase.auth().signInWithRedirect(provider);
      

    หลังจากที่ผู้ใช้ลงชื่อเข้าใช้เสร็จแล้วและกลับมาที่เพจ คุณสามารถรับผลการลงชื่อเข้าใช้ได้โดยการเรียก getRedirectResult

    Web modular API

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);

    เมื่อดำเนินการเสร็จสิ้น โทเค็น OAuth ID และโทเค็นการเข้าถึงที่เชื่อมโยงกับผู้ให้บริการสามารถดึงข้อมูลจากออบเจ็กต์ firebase.auth.UserCredential ที่ส่งคืนได้

    เมื่อใช้โทเค็นการเข้าถึง OAuth คุณสามารถเรียก Yahoo API ได้

    ตัวอย่างเช่น หากต้องการรับข้อมูลโปรไฟล์พื้นฐาน สามารถเรียกใช้ REST API ต่อไปนี้:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
    

    โดยที่ YAHOO_USER_UID คือ ID ผู้ใช้ Yahoo ซึ่งสามารถดึงข้อมูลจากฟิลด์ firebase.auth().currentUser.providerData[0].uid หรือจาก result.additionalUserInfo.profile

  5. แม้ว่าตัวอย่างข้างต้นจะเน้นไปที่ขั้นตอนการลงชื่อเข้าใช้ แต่คุณยังมีความสามารถในการเชื่อมโยงผู้ให้บริการ Yahoo กับผู้ใช้ที่มีอยู่โดยใช้ linkWithPopup / linkWithRedirect ตัวอย่างเช่น คุณสามารถเชื่อมโยงผู้ให้บริการหลายรายกับผู้ใช้รายเดียวกันได้ โดยอนุญาตให้ผู้ให้บริการรายใดรายหนึ่งลงชื่อเข้าใช้ด้วยได้

    Web modular API

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. รูปแบบเดียวกันนี้สามารถใช้ได้กับ reauthenticateWithPopup / reauthenticateWithRedirect ซึ่งสามารถใช้เพื่อดึงข้อมูลรับรองใหม่สำหรับการดำเนินการที่มีความละเอียดอ่อนซึ่งจำเป็นต้องเข้าสู่ระบบล่าสุด

    Web modular API

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

ตรวจสอบสิทธิ์กับ Firebase ในส่วนขยาย Chrome

หากคุณกำลังสร้างแอปส่วนขยาย Chrome โปรดดู คำแนะนำเอกสารนอกจอ

ขั้นตอนถัดไป

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

  • ในแอปของคุณ วิธีที่แนะนำในการทราบสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่าผู้สังเกตการณ์บนออบเจ็ Auth จากนั้น คุณสามารถรับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้ได้จากออบเจ็กต์ User ดู จัดการผู้ใช้

  • ในฐานข้อมูลเรียลไทม์ Firebase และ กฎความปลอดภัยของ พื้นที่เก็บข้อมูลบนคลาวด์ คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้สามารถเข้าถึงได้

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

หากต้องการออกจากระบบผู้ใช้ ให้โทร signOut :

Web modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});