คู่มือฉบับสมบูรณ์เกี่ยวกับการรับรองความถูกต้องของบุคคลที่สามใน Flutter โดยใช้ Parse บน Back4App

บทนำ การรวมวิธีการตรวจสอบตัวตนของบุคคลที่สาม เช่น facebook, google และ apple เข้ากับแอป flutter ของคุณสามารถเพิ่มประสบการณ์ผู้ใช้ได้อย่างมากโดยการให้ตัวเลือกการเข้าสู่ระบบที่ยืดหยุ่นและสะดวกสบาย parse server ซึ่งขับเคลื่อนโดย back4app มีการสนับสนุนในตัวสำหรับผู้ให้บริการการตรวจสอบตัวตนเหล่านี้ ในบทแนะนำนี้ คุณจะได้เรียนรู้วิธีการนำการตรวจสอบตัวตนของบุคคลที่สามไปใช้ในแอป flutter ของคุณโดยใช้ parse sdk บน back4app เมื่อสิ้นสุดบทแนะนำนี้ คุณจะมีแอป flutter ที่มีฟีเจอร์การลงทะเบียนและการเข้าสู่ระบบที่ใช้งานได้อย่างสมบูรณ์ซึ่งรวมถึง การตรวจสอบตัวตนด้วยอีเมล/รหัสผ่านมาตรฐานโดยใช้ parse วิธีการตรวจสอบตัวตนของบุคคลที่สาม facebook google apple ข้อกำหนดเบื้องต้น เพื่อที่จะติดตามบทแนะนำนี้ คุณจะต้องมีสิ่งต่อไปนี้ บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app https //www back4app com สภาพแวดล้อมการพัฒนา flutter ที่ติดตั้งบนเครื่องของคุณ หากคุณต้องการความช่วยเหลือในการตั้งค่า flutter ให้ทำตาม คู่มือนี้ https //flutter dev/docs/get started/install ความรู้พื้นฐานเกี่ยวกับ flutter และ dart หากคุณเป็นมือใหม่ ให้ตรวจสอบ บทนำของ flutter https //flutter dev/docs/get started/codelab บัญชีนักพัฒนา สำหรับ facebook, google และ apple (จำเป็นสำหรับการตั้งค่าวิธีการเข้าสู่ระบบของบุคคลที่สาม) ide หรือโปรแกรมแก้ไขข้อความ เช่น visual studio code หรือ android studio ขั้นตอนที่ 1 – การตั้งค่า backend ของ back4app 1 1 สร้างโปรเจกต์ back4app เข้าสู่ระบบที่ แดชบอร์ด back4app https //dashboard back4app com/ คลิกที่ "สร้างแอปใหม่" ใส่ชื่อสำหรับแอปพลิเคชันของคุณ เช่น "authdemo" , และคลิก "สร้าง" เมื่อโปรเจกต์ถูกสร้างขึ้นแล้ว ให้ไปที่ การตั้งค่าแอป > ความปลอดภัย & คีย์ จดบันทึก application id และ client key คุณจะต้องใช้ค่าพวกนี้เพื่อเริ่มต้น parse ในแอป flutter ของคุณ 1 2 เปิดใช้งานผู้ให้บริการการตรวจสอบสิทธิ์ ในแดชบอร์ด back4app ของคุณ ให้ไปที่ การตั้งค่าเซิร์ฟเวอร์ > การตรวจสอบสิทธิ์ เปิดใช้งานวิธีการตรวจสอบสิทธิ์ที่คุณตั้งใจจะใช้ facebook google apple สำหรับแต่ละผู้ให้บริการ คุณจะต้องป้อนข้อมูลประจำตัวเฉพาะ (app ids, client ids, secrets, ฯลฯ) ซึ่งจะถูกตั้งค่าในขั้นตอนถัดไป ขั้นตอนที่ 2 – การติดตั้งและตั้งค่า parse sdk ใน flutter 2 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและสร้างโปรเจกต์ flutter ใหม่ flutter create auth demo cd auth demo 2 2 เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้สำหรับ parse และตัวเลือกการลงชื่อเข้าใช้ของบุคคลที่สาม dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 flutter facebook auth ^5 0 5 google sign in ^5 4 0 sign in with apple ^3 3 0 รัน flutter pub get เพื่อติดตั้ง dependencies 2 3 เริ่มต้น parse ใน main dart ในไฟล์ lib/main dart ให้นำเข้า parse sdk และเริ่มต้นในฟังก์ชัน main ดังนี้ import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'screens/auth screen dart'; // you'll create this file later void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'parse auth demo', theme themedata( primaryswatch colors blue, ), home authscreen(), ); } } แทนที่ 'your app id' และ 'your client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณจากขั้นตอนที่ 1 ขั้นตอนที่ 3 – การดำเนินการรับรองความถูกต้องมาตรฐาน 3 1 สร้างบริการการรับรองความถูกต้อง สร้างไดเรกทอรีใหม่ชื่อ services ภายใต้ lib และเพิ่มไฟล์ชื่อ auth service dart บริการนี้จะจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้โดยใช้ parse // lib/services/auth service dart import 'package\ parse server sdk flutter/parse server sdk dart'; class authservice { future\<parseuser?> signup(string username, string password, string email) async { var user = parseuser(username, password, email); var response = await user signup(); if (response success) { return user; } else { return null; } } future\<parseuser?> login(string username, string password) async { var user = parseuser(username, password, null); var response = await user login(); if (response success) { return user; } else { return null; } } future\<void> logout() async { var user = await parseuser currentuser() as parseuser?; await user? logout(); } } 3 2 สร้างหน้าจอการตรวจสอบสิทธิ์ สร้างไดเรกทอรีใหม่ชื่อ screens ภายใต้ lib และเพิ่มไฟล์ชื่อ auth screen dart หน้าจอนี้จะให้ ui สำหรับการตรวจสอบสิทธิ์มาตรฐาน // lib/screens/auth screen dart import 'package\ flutter/material dart'; import ' /services/auth service dart'; class authscreen extends statefulwidget { @override authscreenstate createstate() => authscreenstate(); } class authscreenstate extends state\<authscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); final texteditingcontroller emailcontroller = texteditingcontroller(); final authservice authservice = authservice(); void signup() async { var user = await authservice signup( usernamecontroller text trim(), passwordcontroller text trim(), emailcontroller text trim(), ); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('user created successfully!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('sign up failed '))); } } void login() async { var user = await authservice login( usernamecontroller text trim(), passwordcontroller text trim(), ); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('login failed '))); } } @override widget build(buildcontext context) { return scaffold( appbar appbar(title const text('parse auth')), body padding( padding const edgeinsets all(16 0), child singlechildscrollview( child column( children \[ const text( 'standard authentication', style textstyle(fontsize 18, fontweight fontweight bold), ), textfield( controller usernamecontroller, decoration const inputdecoration(labeltext 'username'), ), textfield( controller emailcontroller, decoration const inputdecoration(labeltext 'email'), ), textfield( controller passwordcontroller, decoration const inputdecoration(labeltext 'password'), obscuretext true, ), const sizedbox(height 20), elevatedbutton( onpressed signup, child const text('sign up'), ), elevatedbutton( onpressed login, child const text('login'), ), const divider(), const sizedbox(height 20), const text( 'third party authentication', style textstyle(fontsize 18, fontweight fontweight bold), ), // buttons for third party authentication will be added here ], ), ), ), ); } } ขั้นตอนที่ 4 – การรวมการตรวจสอบสิทธิ์ facebook 4 1 ตั้งค่าบัญชีนักพัฒนาของ facebook สร้างแอป facebook ไปที่ facebook สำหรับนักพัฒนา https //developers facebook com/ และเข้าสู่ระบบ คลิกที่ "แอปของฉัน" และจากนั้น "สร้างแอป" เลือก "ผู้บริโภค" เป็นประเภทแอปและคลิก "ถัดไป" กรอก ชื่อแอป และ อีเมลติดต่อ , จากนั้นคลิก "สร้างแอป" เพิ่มการเข้าสู่ระบบ facebook ในแอปของคุณ ในแดชบอร์ดแอปของคุณ ให้ไปที่ "เพิ่มผลิตภัณฑ์" และเลือก "เข้าสู่ระบบด้วย facebook" เลือก "android" และ/หรือ "ios" ขึ้นอยู่กับแพลตฟอร์มเป้าหมายของคุณ ทำตามขั้นตอนการตั้งค่าที่ facebook ให้มา คุณจะต้องใช้ bundle identifier ของแอปสำหรับ ios และ package name สำหรับ android กำหนด uri การเปลี่ยนเส้นทาง oauth ตั้งค่า oauth redirect uri เป็น https //parseapi back4app com/auth/facebook/callback รับ app id และ app secret ในแดชบอร์ดแอปของคุณ ไปที่ "การตั้งค่า" > "พื้นฐาน" จดบันทึก app id และ app secret เพิ่ม app id และ secret ไปยัง back4app ในแดชบอร์ด back4app ให้ไปที่ การตั้งค่าเซิร์ฟเวอร์ > การตรวจสอบสิทธิ์ ภายใต้ facebook , ใส่ app id และ app secret 4 2 อัปเดต auth service dart ด้วย facebook login เพิ่มโค้ดต่อไปนี้เพื่อจัดการการรับรองความถูกต้องของ facebook // add these imports at the top import 'package\ flutter facebook auth/flutter facebook auth dart'; // inside authservice class map\<string, dynamic> facebookauthdata( string? accesstoken, string? userid, datetime? expirationdate) { return { 'id' userid, 'access token' accesstoken, 'expiration date' expirationdate? toutc() toiso8601string(), }; } future\<parseuser?> loginwithfacebook() async { final loginresult result = await facebookauth instance login(); if (result status == loginstatus success) { final accesstoken accesstoken = result accesstoken!; var user = parseuser(null, null, null); var response = await user loginwith( 'facebook', facebookauthdata( accesstoken token, accesstoken userid, accesstoken expires, ), ); if (response success) { return user; } } return null; } 4 3 เพิ่มปุ่มเข้าสู่ระบบด้วย facebook ไปที่ auth screen dart เพิ่มปุ่มต่อไปนี้ใน ui ของคุณ elevatedbutton( onpressed () async { var user = await authservice loginwithfacebook(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('facebook login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('facebook login failed '))); } }, child const text('login with facebook'), ), 4 4 การกำหนดค่าที่เฉพาะเจาะจงกับแพลตฟอร์ม android อัปเดต android/app/src/main/androidmanifest xml \<manifest xmlns\ android="http //schemas android com/apk/res/android" package="com example auth demo"> \<! add this inside the \<application> tag > \<meta data android\ name="com facebook sdk applicationid" android\ value="@string/facebook app id"/> \<activity android\ name="com facebook facebookactivity" android\ configchanges="keyboard|keyboardhidden|screenlayout|screensize|orientation" android\ label="@string/app name" /> \<! existing configurations > \</manifest> เพิ่ม facebook app id ของคุณไปที่ android/app/src/main/res/values/strings xml \<resources> \<string name="app name">authdemo\</string> \<string name="facebook app id">your facebook app id\</string> \</resources> ios อัปเดต info plist ไฟล์ \<key>cfbundleurltypes\</key> \<array> \<dict> \<key>cfbundleurlschemes\</key> \<array> \<string>fbyour facebook app id\</string> \</array> \</dict> \</array> \<key>facebookappid\</key> \<string>your facebook app id\</string> \<key>facebookdisplayname\</key> \<string>authdemo\</string> ขั้นตอนที่ 5 – การรวม google authentication 5 1 ตั้งค่าบัญชีนักพัฒนาของ google สร้างโปรเจกต์ใน google cloud console ไปที่ google cloud console https //console cloud google com/ และสร้างโปรเจกต์ใหม่ กำหนดค่าหน้าจอยินยอม oauth ไปที่ apis & services > หน้าจอยินยอม oauth ตั้งค่าหน้าจอยินยอมด้วยขอบเขตที่จำเป็น สร้าง oauth client id ไปที่ credentials > สร้าง credentials > oauth client id เลือก web application เพิ่ม authorized redirect uris https //parseapi back4app com/auth/google/callback จดบันทึก client id และ client secret เพิ่ม client id และ secret ไปยัง back4app ในแดชบอร์ด back4app ภายใต้ server settings > authentication , ป้อน client id และ client secret สำหรับ google 5 2 อัปเดต auth service dart ด้วย google login เพิ่มโค้ดต่อไปนี้เพื่อจัดการการรับรองความถูกต้องของ google // add this import at the top import 'package\ google sign in/google sign in dart'; // inside authservice class map\<string, dynamic> googleauthdata(string? idtoken, string? accesstoken) { return { 'id token' idtoken, 'access token' accesstoken, }; } future\<parseuser?> loginwithgoogle() async { final googlesignin googlesignin = googlesignin( scopes \['email'], ); final googlesigninaccount? googleuser = await googlesignin signin(); if (googleuser == null) { return null; } final googlesigninauthentication googleauth = await googleuser authentication; var user = parseuser(null, null, null); var response = await user loginwith( 'google', googleauthdata( googleauth idtoken, googleauth accesstoken, ), ); if (response success) { return user; } return null; } 5 3 เพิ่มปุ่มเข้าสู่ระบบ google ไปยัง auth screen dart เพิ่มปุ่มต่อไปนี้ลงใน ui ของคุณ elevatedbutton( onpressed () async { var user = await authservice loginwithgoogle(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('google login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('google login failed '))); } }, child const text('login with google'), ), 5 4 การกำหนดค่าที่เฉพาะเจาะจงกับแพลตฟอร์ม แอนดรอยด์ เพิ่มสิ่งต่อไปนี้ใน android/app/build gradle ไฟล์ dependencies { // add this line implementation 'com google android gms\ play services auth 20 0 0' // existing dependencies } เพิ่ม google client id ของคุณไปที่ android/app/src/main/res/values/strings xml \<resources> \<string name="app name">authdemo\</string> \<string name="default web client id">your google client id\</string> \</resources> อัปเดต android/app/src/main/androidmanifest xml \<manifest xmlns\ android="http //schemas android com/apk/res/android" package="com example auth demo"> \<! existing configurations > \<application> \<! existing configurations > \<meta data android\ name="com google android gms client application id" android\ value="@string/default web client id" /> \</application> \</manifest> ios เพิ่ม id ของลูกค้าที่กลับด้านไปยัง info plist \<key>cfbundleurltypes\</key> \<array> \<dict> \<key>cfbundleurlschemes\</key> \<array> \<string>com googleusercontent apps your client id\</string> \</array> \</dict> \</array> ขั้นตอนที่ 6 – การรวมการตรวจสอบสิทธิ์ของ apple 6 1 ตั้งค่าบัญชีนักพัฒนา apple ลงทะเบียนแอปของคุณ ลงชื่อเข้าใช้ apple developer portal https //developer apple com/ และลงทะเบียนแอปของคุณ เปิดใช้งานการลงชื่อเข้าใช้ด้วย apple ภายใต้ identifiers , เลือกแอปของคุณและเปิดใช้งาน sign in with apple สร้าง services id สร้าง services id สำหรับแอปของคุณ ตั้งค่า redirect uri เป็น https //parseapi back4app com/auth/apple/callback สร้าง client secret สร้าง sign in with apple คีย์ส่วนตัว ใช้คีย์นี้เพื่อสร้าง client secret เพิ่มข้อมูลรับรองไปยัง back4app ในแดชบอร์ด back4app ภายใต้ server settings > authentication , ป้อน services id และ client secret สำหรับ apple 6 2 อัปเดต auth service dart ด้วยการเข้าสู่ระบบด้วย apple เพิ่มโค้ดต่อไปนี้เพื่อจัดการการรับรองความถูกต้องของ apple // add this import at the top import 'package\ sign in with apple/sign in with apple dart'; import 'dart\ io' show platform; // inside authservice class map\<string, dynamic> appleauthdata(string? identitytoken, string? userid) { return { 'id' userid, 'token' identitytoken, }; } future\<parseuser?> loginwithapple() async { if (!platform isios) { // sign in with apple is only available on ios return null; } final credential = await signinwithapple getappleidcredential( scopes \[ appleidauthorizationscopes email, appleidauthorizationscopes fullname, ], ); var user = parseuser(null, null, null); var response = await user loginwith( 'apple', appleauthdata( credential identitytoken, credential useridentifier, ), ); if (response success) { return user; } return null; } 6 3 เพิ่มปุ่มเข้าสู่ระบบด้วย apple ไปที่ auth screen dart เพิ่มปุ่มต่อไปนี้ลงใน ui ของคุณ elevatedbutton( onpressed () async { var user = await authservice loginwithapple(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('apple login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('apple login failed '))); } }, child const text('login with apple'), ), 6 4 การกำหนดค่าที่เฉพาะเจาะจงกับแพลตฟอร์ม เฉพาะ ios ใน xcode ให้เปิดโปรเจกต์ของคุณและไปที่ signing & capabilities คลิกที่ "+ capability" และเพิ่ม "sign in with apple" ตรวจสอบให้แน่ใจว่า bundle identifier ของคุณตรงกับที่ลงทะเบียนใน apple developer portal ขั้นตอนที่ 7 – ทดสอบแอปพลิเคชันของคุณ ตอนนี้ที่คุณได้ตั้งค่าทุกวิธีการตรวจสอบแล้ว คุณสามารถเรียกใช้แอปของคุณและทดสอบตัวเลือกการเข้าสู่ระบบแต่ละตัว 7 1 เรียกใช้แอป flutter run สำหรับ ios คุณต้องเรียกใช้แอปบนอุปกรณ์จริงเพื่อทดสอบการเข้าสู่ระบบด้วย apple สำหรับ android คุณสามารถใช้โปรแกรมจำลองหรืออุปกรณ์จริง 7 2 ทดสอบการตรวจสอบมาตรฐาน กรอกชื่อผู้ใช้ อีเมล และรหัสผ่าน แตะ "sign up" เพื่อสร้างผู้ใช้ใหม่ แตะ "login" เพื่อเข้าสู่ระบบด้วยข้อมูลรับรองที่สร้างขึ้น 7 3 ทดสอบการเข้าสู่ระบบด้วย facebook แตะ "เข้าสู่ระบบด้วย facebook" หน้าจอเข้าสู่ระบบ facebook จะปรากฏขึ้น เข้าสู่ระบบด้วยข้อมูลประจำตัว facebook ของคุณ 7 4 ทดสอบการเข้าสู่ระบบ google แตะ "เข้าสู่ระบบด้วย google" หน้าจอเข้าสู่ระบบ google จะปรากฏขึ้น เข้าสู่ระบบด้วยบัญชี google ของคุณ 7 5 ทดสอบการเข้าสู่ระบบ apple (เฉพาะ ios) แตะ "เข้าสู่ระบบด้วย apple" หน้าต่างเข้าสู่ระบบ apple จะปรากฏขึ้น ยืนยันตัวตนด้วย apple id ของคุณ บทสรุป ในบทแนะนำนี้ คุณได้ดำเนินการใช้งานการตรวจสอบสิทธิ์ด้วยอีเมล/รหัสผ่านตามมาตรฐานและรวมวิธีการตรวจสอบสิทธิ์ของบุคคลที่สาม (facebook, google และ apple) เข้ากับแอป flutter ของคุณโดยใช้ parse sdk บน back4app การตั้งค่านี้ช่วยเพิ่มประสบการณ์ของผู้ใช้โดยการเสนอทางเลือกในการเข้าสู่ระบบที่สะดวกหลายทาง ขั้นตอนถัดไป โปรไฟล์ผู้ใช้ ขยายแอปเพื่อจัดการโปรไฟล์ผู้ใช้ อนุญาตให้ผู้ใช้ปรับปรุงข้อมูลของตน ฟังก์ชันการออกจากระบบ สร้างฟังก์ชันการออกจากระบบสำหรับแต่ละวิธีการตรวจสอบสิทธิ์ ความปลอดภัยของข้อมูล ปกป้องข้อมูลของคุณโดยการใช้การควบคุมการเข้าถึงตามบทบาทด้วย parse acls และ roles การจัดการข้อผิดพลาด ปรับปรุงการจัดการข้อผิดพลาดเพื่อให้ข้อเสนอแนะแก่ผู้ใช้ได้ละเอียดมากขึ้น การปรับปรุง ui ปรับแต่ง ui ให้ตรงกับแบรนด์ของแอปของคุณและปรับปรุงประสบการณ์ของผู้ใช้ แหล่งข้อมูลเพิ่มเติม เอกสาร back4app https //www back4app com/docs คู่มือ parse flutter sdk https //docs parseplatform org/flutter/guide/ เอกสารอย่างเป็นทางการของ flutter https //flutter dev/docs facebook สำหรับนักพัฒนา https //developers facebook com/ google identity platform https //developers google com/identity เอกสาร sign in with apple https //developer apple com/sign in with apple/ เขียนโค้ดให้สนุก!