flutter_login_vk

flutter_login_vk

ปลั๊กอิน Flutter เพื่อเข้าสู่ระบบผ่าน VK.com

เพิ่มคุณสมบัติการเข้าสู่ระบบ VK ในแอปพลิเคชันของคุณได้อย่างง่ายดาย ข้อมูลโปรไฟล์ผู้ใช้รวมอยู่ด้วย

เวอร์ชัน SDK

VK SDK เวอร์ชันใช้ในปลั๊กอิน:

• iOS: ^1.6 (Cocoapods)

• Android: 3.5.0 (Maven Core, API)

ข้อกำหนดขั้นต่ำ

• iOS 9.0 ขึ้นไป

• Android 5.0 และใหม่กว่า (SDK 21 ) compileSdkVersion ขั้นต่ำ 31

หากโครงการของคุณถูกสร้างขึ้นด้วย Flutter Pre 1.12 คุณควรอัพเกรดเป็น Android Embedding V2 ดู https://flutter.dev/go/android-project-migration

เริ่มต้น

เพื่อใช้ปลั๊กอินนี้:

1. เพิ่ม flutter_login_vk เป็นการพึ่งพาในไฟล์ pubspec.yaml ของคุณ

2. สร้างแอพบน vk.com

3. การตั้งค่า Android;

4. ตั้งค่า iOS;

5. การตั้งค่าแอป VK.com เพิ่มเติม

6. ใช้ปลั๊กอินในแอปพลิเคชัน

ดูเอกสารประกอบบน VK.com สำหรับข้อมูลเต็ม:

• iOS SDK

• Android SDK

และนี่คือคำแนะนำในภาษารัสเซียหากเป็นภาษาแม่ของคุณ

แอพบน vk.com

สร้างแอพบน vk.com https://vk.com/editapp?act=create

1. ป้อน "ชื่อ"

2. เลือก แอพแบบสแตนด์อโลน เป็น "แพลตฟอร์ม"

3. คลิก "เชื่อมต่อแอป"

แอปพลิเคชันจะถูกสร้างขึ้น ตอนนี้เลือกแท็บ "การตั้งค่า" และคัดลอก "แอพรหัส" (อ้างอิงเป็น [APP_ID] ใน readme นี้)

การตั้งค่าแอพสำหรับ Android

1. ตั้ง Package name for Android - ชื่อแพ็คเกจของคุณสำหรับแอปพลิเคชัน Android ( package แอตทริบิวต์ใน AndroidManifest.xml )

2. ตั้ง Main activity for Android - คลาสกิจกรรมหลักของคุณ (พร้อมแพ็คเกจ) โดยค่าเริ่มต้นมันจะเป็น com.yourcompany.yourapp.MainActivity

3. ในการเติม Signing certificate fingerprint for Android คุณควรสร้างลายนิ้วมือ SHA1 ตามที่อธิบายไว้ในเอกสารประกอบ (โดยไม่มีคำนำหน้า SHA1: คำนำหน้า) ให้ความสนใจ : คุณควรลบโคลอนทั้งหมดออกจากสตริงลายนิ้วมือ เพิ่มลายนิ้วมือสำหรับการดีบักและใบรับรองการเปิดตัว หมายเหตุ: หากแอปพลิเคชันของคุณใช้การลงนามแอป Google Play มากกว่าที่คุณควรได้รับใบรับรองลายนิ้วมือ SHA-1 จาก Google Play Console

   สำคัญ! คุณควรเพิ่มลายนิ้วมือสำหรับการสร้างทุกรุ่น เช่นถ้าคุณมี CI/CD ที่สร้าง APK สำหรับการทดสอบด้วยใบรับรองของตัวเอง (อาจเป็นใบรับรองการดีบักที่สร้างขึ้นอัตโนมัติหรืออื่น ๆ ) กว่าที่คุณควรเพิ่มลายนิ้วมือด้วย

4. คลิก "บันทึก"

การตั้งค่าแอพสำหรับ iOS

1. เพิ่มตัวระบุบันเดิลของคุณ - ตั้ง App Bundle ID for iOS (คุณสามารถค้นหาได้ใน XCode: Runner - Target Runner - ทั่วไป, Identity Section, Field Bundle Identifier )

2. นอกจากนี้ยังตั้ง App ID for iOS คุณเป็น SKU (คุณสามารถค้นหาได้ใน App Store Connect: แอพของฉัน - {แอปพลิเคชันของคุณ} - แอพสโตร์ - ข้อมูลแอพ, ส่วน "ข้อมูลทั่วไป") ส่วนใหญ่มักจะไม่เหมือนกับ Bundle ID

3. คลิก "บันทึก"

Android

แก้ไข AndroidManifest.xml ( android/app/src/main/AndroidManifest.xml ):

1. เพิ่มการอนุญาต INTERNET ในรูทของ <manifest> หากคุณยังไม่มี (อาจมี):

 <Use-Permission Android: name = "Android.permission.internet" />>>

2. เพิ่มกิจกรรมใน application ส่วน:

 <กิจกรรม Android: name = "com.vk.sdk.vkserviceActivity" Android: label = "ServiceActivity" Android: Theme = "@style /vk.transparent" />

3. เพิ่มตัวระบุแอปพลิเคชัน VK ของคุณลงในไฟล์ทรัพยากร (เช่น strings.xml ), แทนที่ [APP_ID] ด้วยรหัสแอปพลิเคชันของคุณ:

 <resources>
    <integer name = "com_vk_sdk_appid"> [app_id] </teger>
</srovesource>

4. เพิ่มกฎ -keep class com.vk.** { *; } ในไฟล์ proguard ของคุณ ( android/app/proguard-rules.pro )

ดูตัวอย่าง AndroidManifest.xml เต็มรูปแบบ

iOS

กำหนดค่า Info.plist ( ios/Runner/Info.plist ) คุณสามารถแก้ไขเป็นไฟล์ข้อความจาก IDE ของคุณหรือคุณสามารถเปิดโครงการ ( ios/Runner.xcworkspace ) ใน XCode

1. ใน XCode คลิกขวาที่ Info.plist และเลือก Open As Source Code

2. คัดลอกและวางตัวอย่าง XML ต่อไปนี้ลงในร่างกายของไฟล์ของคุณ ( <dict>...</dict> ) แทนที่ [APP_ID] ด้วยรหัสแอปพลิเคชันของคุณ:

 <sey> cfbundleUrlTypes </key>
<อาเรย์>
  <pont>
  <sey> cfbundleUrlschemes </key>
  <อาเรย์>
    <string> vk [app_id] </string>
  </erray>
  </itc
</erray>

3. นอกจากนี้ยังเพิ่มลงใน Info.plist ( <dict>...</dict> ):

 <sey> lsapplicationqueriesschemes </key>
 <อาเรย์>
     <String> vk </string>
     <String> VK-Share </string>
     <String> vkauthorize </string>
 </erray>

4. ป้อนตัวระบุแอปพลิเคชัน VK ของคุณ

 <sey> vkappid </key>
<String> [APP_ID] </string>

ดู Info.plist เต็มรูปแบบในตัวอย่าง

บันทึก. ตรวจสอบว่าคุณมีคีย์ CFBundleURLTypes หรือ LSApplicationQueriesSchemes อยู่ใน Info.plist ของคุณ หากคุณมีคุณควรรวมค่าของพวกเขาแทนที่จะเพิ่มคีย์ซ้ำ

หากคุณต้องการใช้ scope=nohttps ซึ่งเรา ไม่แนะนำ อย่างยิ่งคุณควรเพิ่ม NSAppTransportSecurity โปรดดูเอกสารประกอบ

การตั้งค่าแอป VK.com เพิ่มเติม

ไปที่แอพของฉันและคลิก "จัดการ" บนแอปของคุณ

บนแท็บ "ข้อมูล" คุณควร:

1. ป้อน "คำอธิบาย"

2. เลือก "หมวดหมู่" ที่เหมาะสม

3. อัปโหลดไอคอนขนาดเล็ก "32x32 ไอคอน"

4. คลิก "บันทึก"

5. อัปโหลด "Square Banner" และ "A Square Banner สำหรับแคตตาล็อก" - ผู้ใช้สามารถดูได้

ตั้งค่าการตั้งค่าอื่น ๆ หากคุณต้องการ

กว่าไปที่แท็บ "การตั้งค่า" และเปิดแอปพลิเคชัน: เปลี่ยน "สถานะแอพ" จาก Application off ไปยัง Application on and visible to all

คลิก "บันทึก"

การใช้งานในแอปพลิเคชัน

ก่อนอื่นคุณควรสร้างอินสแตนซ์ของ VKLogin กว่าก่อนที่วิธีการใด ๆ จะโทรหรือตรวจสอบ accessToken คุณควรเริ่มต้น VK SDK:

 vk สุดท้าย = vklogin (); รอ vk.initsdk ();

ตอนนี้คุณสามารถใช้ปลั๊กอิน

คุณสมบัติ:

• เข้าสู่ระบบผ่าน vk.com;

• รับโทเค็น

• รับโปรไฟล์ผู้ใช้

• รับอีเมลผู้ใช้

• ตรวจสอบว่าเข้าสู่ระบบหรือไม่

• ออกจากระบบ

รหัสตัวอย่าง:

 นำเข้า 'แพ็คเกจ: flutter_login_vk/flutter_login_vk.dart'; // สร้างอินสแตนซ์ของ vkloginfinal vk = vklogin (); // initializeawait vk.initsdk (); // log infinal res = await vk.login (ขอบเขต: , vkscope.friends,
]); // ตรวจสอบผลลัพธ์ (res.isvalue) {// ไม่มีข้อผิดพลาด แต่เรายังไม่รู้
  // ถ้าผู้ใช้เข้าสู่ระบบหรือไม่
  // คุณควรตรวจสอบ iscanceled
  vkloginResult สุดท้ายผล = res.asvalue! .value;  if (result.iscanceled) {// ผู้ใช้ยกเลิกการเข้าสู่ระบบ
  } else {// เข้าสู่ระบบ // ส่งโทเค็นการเข้าถึงไปยังเซิร์ฟเวอร์เพื่อตรวจสอบความถูกต้องและ AuthFinal vkaccessToken? AccessToken = result.accessToken; ถ้า (AccessToken! = null) {print ('token access: $ {accessToken.token}');      // รับข้อมูลโปรไฟล์ profileres สุดท้าย = รอ vk.getUserProfile ();      โปรไฟล์สุดท้าย = profileres.asvalue? .Value;      if (profile! = null) {print ('hello, $ {profile.firstname}! คุณ id: $ {profile.userid}');
      } // รับอีเมล (เนื่องจากเราขอสิทธิ์อีเมล) อีเมลสุดท้าย = รอ vk.getUserEmail ();      พิมพ์ ('และอีเมลของคุณคือ $ อีเมล');
    } else {print ('มีบางอย่างผิดปกติ');
    -
  -
} else {// เข้าสู่ระบบล้มเหลว
  final errorres = res.aserror!;  พิมพ์ ('ข้อผิดพลาดในขณะที่เข้าสู่ระบบ: $ {errorres.error}');
-

หมายเหตุการเริ่มต้น

เมื่อคุณโทร initSdk() ปลั๊กอินพยายามกู้คืนเซสชันก่อนหน้า หากโทเค็นหมดอายุแล้ว - มันจะถูกรีเฟรช

นอกจากนี้ในระหว่างการกู้คืนหน้าจอเข้าสู่ระบบอาจแสดงต่อผู้ใช้ (เฉพาะในกรณีที่ผู้ใช้เข้าสู่ระบบ)

นอกจากนี้คุณสามารถส่งผ่านไปยัง scope ที่ต้องการ initSdk() และหากเซสชันผู้ใช้ปัจจุบันไม่ได้จัดเตรียมไว้ - ผู้ใช้จะออกจากระบบ

นอกจากนี้คุณสามารถระบุเวอร์ชัน API ที่จะใช้ แต่คุณไม่ควร