CapacitorGoogleAuth

คำเตือน

ปลั๊กอินนี้อยู่ในโหมดบำรุงรักษาต่ำสำหรับคุณสมบัติใหม่เช่นผู้จัดการข้อมูลรับรองหรือรายการความเป็นส่วนตัวโปรดใช้: https://github.com/cap-go/capacitor-social-login

ตัวเก็บประจุ

@codetrix-studio/capacitor-google-auth

ตัวเก็บประจุ 6

ปลั๊กอินตัวเก็บประจุสำหรับ Google Auth

ทำลายการเปลี่ยนแปลงใน v6

ในเวอร์ชัน V6 clientId ในวิธีการเริ่มต้นใช้ในลำดับความสำคัญเหนือสถานที่อื่น ๆ ที่คุณสามารถตั้งค่าได้ หากก่อนที่คุณจะใช้สิ่งนี้บนเว็บเท่านั้นให้ใช้งานบนมือถือ หรือตั้งค่าตามเงื่อนไขเพื่อทำซ้ำพฤติกรรมเก่า

ผลงาน

ยินดีต้อนรับ PRS และชื่นชมมากที่ทำให้ปลั๊กอินนี้ทันสมัยด้วยตัวเก็บประจุและคุณสมบัติของ Google Auth Platform อย่างเป็นทางการ

พยายามทำตามแนวทางปฏิบัติของรหัสที่ดี คุณยังสามารถช่วยปรับปรุงการสาธิตที่รวมอยู่ด้วย

PRS สำหรับคุณสมบัติที่ไม่สอดคล้องกับห้องสมุด Google Auth อย่างเป็นทางการนั้นไม่ได้รับการสนับสนุน

(เราเป็นมิตรกับผู้เริ่มต้นที่นี่)

ติดตั้ง

1. ติดตั้งแพ็คเกจ

npm i --save @codetrix-studio/capacitor-google-auth

# pnpm 
pnpm add @codetrix-studio/capacitor-google-auth

# yarn 
yarn add @codetrix-studio/capacitor-google-auth

2. อัพเดทตัวเก็บประจุ deps

npx cap update

การอัปเดต

หากต้องการโยกย้ายไปยังเวอร์ชันตัวเก็บประจุที่แตกต่างกันดูคำสั่งสำหรับการโยกย้ายปลั๊กอินไปยังเวอร์ชันใหม่

การใช้งาน

เว็บ

ลงทะเบียนปลั๊กอินและเริ่มต้นด้วยตนเอง

 import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth' ;

// use hook after platform dom ready
GoogleAuth . initialize ( {
  clientId : 'CLIENT_ID.apps.googleusercontent.com' ,
  scopes : [ 'profile' , 'email' ] ,
  grantOfflineAccess : true ,
} ) ;

หรือหากต้องการใช้เมตาแท็ก (ไม่บังคับ):

 < meta name =" google-signin-client_id " content =" {your client id here} " />
< meta name =" google-signin-scope " content =" profile email " /> 

ตัวเลือก

• clientId - รหัสไคลเอนต์ของแอปพบและสร้างในคอนโซลของ Google Developers
• scopes - เหมือนกับการกำหนดค่าขอบเขต
• grantOfflineAccess - บูลีน, ค่าเริ่มต้น false ตั้งค่าหากแอปพลิเคชันของคุณต้องการรีเฟรชโทเค็นการเข้าถึงเมื่อผู้ใช้ไม่ได้อยู่ที่เบราว์เซอร์

ใช้มัน

 GoogleAuth . signIn ( ) ; 

เชิงมุม

init hook

 // app.component.ts
constructor ( ) {
  this . initializeApp ( ) ;
}

initializeApp ( ) {
  this . platform . ready ( ) . then ( ( ) => {
    GoogleAuth . initialize ( )
  } )
}

ลงชื่อเข้าใช้ฟังก์ชัน

 import { GoogleAuth } from "@codetrix-studio/capacitor-google-auth" ;
import { Auth , GoogleAuthProvider , signInWithCredential } from '@angular/fire/auth' ;

async googleSignIn ( ) {
  let googleUser = await GoogleAuth . signIn ( ) ;

  /*
    If you use Firebase you can forward and use the logged in Google user like this:
  */
  constructor ( private auth : Auth ) { }

  const googleUser = await GoogleAuth . signIn ( ) ;
  const _credential = GoogleAuthProvider . credential ( googleUser . authentication . idToken ) ;
  return signInWithCredential ( this . auth , _credential ) ;
} 

Vue 3

< script setup lang="ts">
import { defineComponent , onMounted } from ' vue ' ;
import { GoogleAuth } from ' @codetrix-studio/capacitor-google-auth ' ;

onMounted (() => {
  GoogleAuth . initialize ();
});

async function logIn() {
  const response = await GoogleAuth . signIn ();
  console . log ( response );
}
</ script >

หรือดู capacitorGoogleauth-vue3- ตัวอย่างเพิ่มเติม

iOS

1. สร้างใน รหัสไคลเอนต์ Credential Credential ของ Google Cloud Console สำหรับ iOS และรับ ID Client ID และ iOS URL Scheme

2. เพิ่ม ตัวระบุ REVERSED_CLIENT_ID เป็น รูปแบบ URL ไปยัง Info.plist จาก โครงการ url iOS
   (xcode: แอพ - เป้าหมาย/แอพ - ข้อมูล - ประเภท URL, คลิกบวกไอคอน)

3. ตั้ง ID ไคลเอนต์ หนึ่งในวิธี (ตามลำดับความสำคัญในปลั๊กอิน):

   1. ตั้งค่า clientId ในวิธีการเริ่มต้น
   2. ตั้ง iosClientId ใน capacitor.config.json
   3. ตั้ง clientId ใน capacitor.config.json
   4. ตั้งค่า CLIENT_ID ใน GoogleService-Info.plist

Android

ตั้ง ID ไคลเอนต์ (ตามลำดับความสำคัญในปลั๊กอิน):

1. ตั้งค่า clientId ในวิธีการเริ่มต้น
2. ตั้งค่า androidClientId ใน capacitor.config.json
3. ตั้ง clientId ใน capacitor.config.json
4. set server_client_id ใน strings.xml

< resources >
  < string name = " server_client_id " >Your Web Client Key</ string >
</ resources >

การเปลี่ยนเวอร์ชัน Auth Services Play (ไม่บังคับ):

ปลั๊กอินนี้ใช้ com.google.android.gms:play-services-auth:21.2.0 โดยค่าเริ่มต้นคุณสามารถแทนที่มันให้ gmsPlayServicesAuthVersion at variables.gradle

วิธีรีเฟรช

วิธีนี้ควรเรียกเมื่อแอปเริ่มต้นเพื่อสร้างหากผู้ใช้เข้าสู่ระบบในขณะนี้หากเป็นจริงวิธีนี้จะส่งคืน AccessToken, IDToken และ RefreshToken ที่ว่างเปล่า

 checkLoggedIn ( ) {
    GoogleAuth . refresh ( )
        . then ( ( data ) => {
            if ( data . accessToken ) {
                this . currentTokens = data ;
            }
        } )
        . catch ( ( error ) => {
            if ( error . type === 'userLoggedOut' ) {
                this . signin ( )
            }
        } ) ;
} 

กำหนดค่า

ชื่อ	พิมพ์	คำอธิบาย
มีลูกค้า	สาย	รหัสไคลเอนต์ของแอปพบและสร้างในคอนโซลของ Google Developers
iosclientid	สาย	รหัสรหัสลูกค้าเฉพาะสำหรับ iOS
AndroidClientid	สาย	รหัสรหัสลูกค้าเฉพาะสำหรับ Android
ขอบเขต	สตริง []	ขอบเขตที่คุณอาจต้องขอเข้าถึง Google APIS https://developers.google.com/identity/protocols/oauth2/scopes
ServerClientId	สาย	ไคลเอนต์นี้ใช้สำหรับการเข้าถึงแบบออฟไลน์และการจัดการด้านเซิร์ฟเวอร์
forcecodeforrefreshtoken	บูลีน	บังคับให้ผู้ใช้เลือกที่อยู่อีเมลเพื่อสร้าง AuthCode ใหม่ ใช้เพื่อรับการรีเฟรชที่ถูกต้อง (ทำงานบน iOS และ Android)

ให้การกำหนดค่าใน root capacitor.config.json

{
  "plugins" : {
    "GoogleAuth" : {
      "scopes" : [ " profile " , " email " ],
      "serverClientId" : " xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com " ,
      "forceCodeForRefreshToken" : true
    }
  }
}

หรือใน capacitor.config.ts

 /// <reference types="'@codetrix-studio/capacitor-google-auth'" />

const config : CapacitorConfig = {
  plugins : {
    GoogleAuth : {
      scopes : [ 'profile' , 'email' ] ,
      serverClientId : 'xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com' ,
      forceCodeForRefreshToken : true ,
    } ,
  } ,
} ;

export default config ; 

หมายเหตุ: ขอบเขตสามารถกำหนดค่าได้ภายใต้ฟังก์ชั่น initialize

API

• initialize(...)
• signIn()
• refresh()
• signOut()
• การเชื่อมต่อ

เริ่มต้น (... )

 initialize ( options ?: InitOptions ) = > void

เริ่มต้น googleauthplugin โหลดไลบรารี GAPI และตั้งค่าปลั๊กอิน

พารามิเตอร์	พิมพ์	คำอธิบาย
options	InitOptions	- ตัวเลือกการเริ่มต้นเสริม

ตั้งแต่: 3.1.0

---

signin ()

 signIn ( ) = > Promise < User >

เริ่มต้นกระบวนการลงชื่อเข้าใช้และส่งคืนสัญญาที่แก้ไขด้วยข้อมูลผู้ใช้

ผลตอบแทน: Promise<User>

---

รีเฟรช ()

 refresh ( ) = > Promise < Authentication >

รีเฟรชโทเค็นการรับรองความถูกต้องและส่งคืนสัญญาที่แก้ไขด้วยรายละเอียดการรับรองความถูกต้องที่อัปเดต

ผลตอบแทน: Promise<Authentication>

---

Signout ()

 signOut ( ) = > Promise < any >

ลงชื่อออกผู้ใช้และส่งคืนสัญญา

ผลตอบแทน: Promise<any>

---

การเชื่อมต่อ

การเริ่มต้น

ข้อต่อ	พิมพ์	คำอธิบาย	ค่าเริ่มต้น	เนื่องจาก
clientId	string	รหัสไคลเอนต์ของแอปพบและสร้างในคอนโซลของ Google Developers สามัญสำหรับ Android หรือ iOS ค่าเริ่มต้นถูกกำหนดในการกำหนดค่า		3.1.0
scopes	string[]	ระบุขอบเขตที่จำเป็นสำหรับการเข้าถึง Google APIS ค่าเริ่มต้นจะถูกกำหนดในการกำหนดค่า		3.4.0-RC.4
grantOfflineAccess	boolean	ตั้งค่าหากแอปพลิเคชันของคุณต้องการรีเฟรชโทเค็นการเข้าถึงเมื่อผู้ใช้ไม่ได้อยู่ที่เบราว์เซอร์ ในการตอบสนองใช้คีย์ serverAuthCode	false	3.1.0

ผู้ใช้

ข้อต่อ	พิมพ์	คำอธิบาย
id	string	ตัวระบุที่ไม่ซ้ำกันสำหรับผู้ใช้
email	string	ที่อยู่อีเมลที่เกี่ยวข้องกับผู้ใช้
name	string	ชื่อเต็มของผู้ใช้
familyName	string	ชื่อสกุล (นามสกุล) ของผู้ใช้
givenName	string	ชื่อที่กำหนด (ชื่อแรก) ของผู้ใช้
imageUrl	string	URL ของรูปภาพโปรไฟล์ของผู้ใช้
serverAuthCode	string	รหัสการรับรองความถูกต้องของเซิร์ฟเวอร์
authentication	Authentication	รายละเอียดการรับรองความถูกต้องรวมถึงการเข้าถึงรีเฟรชและโทเค็น ID

การรับรองความถูกต้อง

ข้อต่อ	พิมพ์	คำอธิบาย
accessToken	string	โทเค็นการเข้าถึงที่ได้รับระหว่างการตรวจสอบ
idToken	string	โทเค็น ID ที่ได้รับระหว่างการตรวจสอบ
refreshToken	string	โทเค็นรีเฟรช

คู่มือการโยกย้าย

โยกย้ายจาก 3.3.x เป็น 3.4.x

ติดตั้งเวอร์ชัน 3.4.x:

npm i --save @codetrix-studio/capacitor-google-auth@^3.4

ทำตามคำแนะนำสำหรับคุณโครงการอัปเดตเป็นตัวเก็บประจุ 6

โยกย้ายจาก 3.2.x เป็น 3.3.x

ติดตั้งเวอร์ชัน 3.3.x:

npm i --save @codetrix-studio/capacitor-google-auth^3.3

ทำตามคำแนะนำสำหรับคุณการอัปเดตโครงการจากตัวเก็บประจุ 4 เป็นตัวเก็บประจุ 5

โยกย้ายจาก 3.2.1 เป็น 3.2.2

สำหรับ Android ในไฟล์ MainActivity.onCreate

 - this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
-   add(GoogleAuth.class);
- }});
+ this.registerPlugin(GoogleAuth.class); 

โยกย้ายจาก 3.1.x เป็น 3.2.x

ติดตั้งเวอร์ชัน 3.2.x:

npm i --save @codetrix-studio/capacitor-google-auth^3.2

ทำตามคำแนะนำสำหรับคุณการอัปเดตโครงการจากตัวเก็บประจุ 3 เป็นตัวเก็บประจุ 4

โยกย้ายจาก 3.0.2 เป็น 3.1.0

 - GoogleAuth.init()
+ GoogleAuth.initialize() 

โยกย้ายจาก 2 เป็น 3

ติดตั้งเวอร์ชัน 3.xx:

npm i --save @codetrix-studio/capacitor-google-auth^3.0

หลังจากโยกย้ายไปยัง Capcitor 3 อัปเดตโครงการของคุณดู Diff:

เว็บ

 - import "@codetrix-studio/capacitor-google-auth";
- import { Plugins } from '@capacitor/core';
+ import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'

- Plugins.GoogleAuth.signIn();
+ GoogleAuth.init()
+ GoogleAuth.signIn() 

โยกย้ายจาก 1 ถึง 2

ติดตั้งเวอร์ชัน 2.xx:

npm i --save @codetrix-studio/capacitor-google-auth@2

สำหรับตัวเก็บประจุ 2.xx ใช้คำสั่ง

ใบอนุญาต

มิกซ์