flutter 微信登入以及客服相關配置

發表於2024-02-11
Flutter

背景

需要使用微信登入和配置微信客服。

使用到的包： fluwx

支援以下功能：

  • 分享圖片，文字，音樂，影片等。支援分享到會話，朋友圈以及收藏
  • 微信支付
  • 在微信登入時，獲取Auth Code
  • 拉起小程式
  • 訂閱訊息
  • 開啟微信
  • 從微信標籤開啟應用

微信登入

微信登入即下圖的
image.png

配置步驟：

1. 微信開發者平臺認證身份

https://open.weixin.qq.com/

註冊進入後會先註冊主體型別，如果是企業則需要填寫企業名稱、簡介、註冊主體、官網連結、註冊人身份證明等資訊。如果是個人則會簡單一些。
image.png

2. 申請建立應用

image.png

建立應用需要填寫，app圖示，應用官網，app執行流程圖等資訊。

企業官網需要有 App 的介紹。請確保使用者可以在官網瞭解業務和功能，若官網資訊和申請的實際功能不相符，建立移動應用稽核可能會被拒絕。每次發起建立移動應用的稽核時間約 3 - 7 個工作日，

中間會有一個需要填寫應用簽名的地方
image.png

這個簽名用在什麼地方，怎麼獲取呢？

該應用簽名由開發者簽名該應用的keystore檔案決定。
所以我們可以先自己生成一個keystore檔案，

$ keytool -genkey -v -keystore health_service_technician.keystore -keyalg RSA -keysize 2048 -validity 10000 -alias technician

之後在 android/app/build.gradle 檔案配置keystore簽名

//配置keystore簽名
    signingConfigs {
        release {
            keyAlias "client"
            keyPassword "123456"
            storeFile file("../health_service_client2.keystore")
            storePassword "123456"
            v1SigningEnabled true
            v2SigningEnabled true
        }
        debug {
            keyAlias "client"
            keyPassword "123456"
            storeFile file("../health_service_client2.keystore")
            storePassword "123456"
            v1SigningEnabled true
            v2SigningEnabled true
        }
    }

現在我們使用flutter 構建的時候，生成的apk檔案就會被簽名了。
flutter build apk --split-per-abi.

這個命令會生成如下三個 APK 檔案

/build/app/outputs/apk/release/app-armeabi-v7a-release.apk
/build/app/outputs/apk/release/app-arm64-v8a-release.apk
/build/app/outputs/apk/release/app-x86_64-release.apk
app-arm64-v8a-release:
面向64位ARM處理器架構的應用程式版本。
這適用於支援ARM64架構的裝置，如大多數現代的高階Android手機和平板電腦。
app-armeabi-v7a-release:
面向32位ARM處理器架構的應用程式版本。
這適用於支援ARMv7架構的裝置，包括許多較舊的和低端的Android裝置。
app-x86_64-release:
面向64位x86處理器架構的應用程式版本。
這適用於支援x86_64架構的裝置，如一些Android模擬器或使用Intel或AMD處理器的一些平板電腦和膝上型電腦。
image.png

我們選擇其中一個安裝到手機裡，就剩最後一步了。

下載微信提供的第三方應用簽名的apk包

下載後是這個介面，我們需要把 AndroidManifest.xml 裡面的包名填寫進去。之後會生成一個簽名，把這個簽名填寫到剛才的應用申請處即可

image.png

這個簽名是什麼呢？

我們獲取以下我們 keystore 檔案的 MD5值

keytool -list -v -keystore .\health_service_client2.keystore
檢視 MD5 如下
85:BC:DD:36:DB:6D:C4:E5:64:3D:D7:FD:CB:C8:6F:4E

跟我們獲取的 簽名比對

簽名：85bcdd36db6dc4e5643dd7fdcbc86f4e
MD5: 85:BC:DD:36:DB:6D:C4:E5:64:3D:D7:FD:CB:C8:6F:4E

對比發現：MD5值去掉兩兩之間的 " : " ,並將大寫改為小寫之後, 你會發現它和簽名生成工具生成的簽名一模一樣。

總結：微信開放平臺Android應用簽名的本質便是我們簽名檔案keystore的MD5值

當我們打包使用的keystore簽名與微信平臺使用的不一致時，使用app時便會報錯

image.png

3. 稽核完成後會獲得appId和appSecret

image.png

之後申請以下的 微信登入介面。
image.png

如果想要在裝置使用時呼叫登入使用者的微信頭像和名字，則需要申請開發者資質的認證。

需要300塊大洋

image.png

4. flutter程式碼開發

4.1 包引入

  # 微信sdk外掛
  fluwx: ^3.11.0+1

4.2 初始化fluwx

import 'package:fluwx/fluwx.dart';
  ///微信登入初始化
  static void initWXLogin() async {
    registerWxApi(
        appId: 'wxxxxxx',//檢視微信開放平臺
        doOnAndroid: true,
        doOnIOS: true,
        universalLink:
            'xxxxx'//檢視微信開放平臺
         );
  }

4.3 呼叫fluwx的 sendWeChatAuth 方法， 請求code

///微信登入按鈕
  Widget loginWxView() {
    if (isBind || isInstalled == null || !isInstalled) {
      //如果未安裝微信,則不顯示微信登入按鈕 為了ios上架稽核
      return Container();
    } else {
      return MyWidget.defaultCheckWidget(
          Utils.getLocalImgWidget('login/ic_wx_login', 40, 40), () {
        if (!_isCheck) {
          Fluttertoast.showToast(msg: '請閱讀並同意<使用者服務協議>及<隱私政策>');
          return;
        }
        sendWeChatAuth(scope: "snsapi_userinfo", state: "wechat_sdk_demo_test");
      });
    }
  }

4.4 獲取到code 後，請求後臺登入

 ///微信登入結果監聽
  void loginWxHandler() async {
    isInstalled = await isWeChatInstalled;

    weChatResponseEventHandler.listen((event) {
      if (event is WeChatAuthResponse) {
        if (event?.code != null) {
          print('wxLogin--code:${event.code}');
          _wxLoginRequest(event.code);
        } else {
          print('wx------------e$event');
          // print('wxLogin--code:${event.code}');
        }
      }
      // else {
      //   print('wx------------e$event');
      // }
    });
  }

上面的程式碼只包括客戶端的，沒有後臺的。具體整體流程程式碼可以檢視官方文件

4.5 流程如下

image.png

微信客服

微信客服功能即拉起微信，可以與微信客服對話。
image.png

首先你需要去 微信企業客服 註冊， 註冊也是需要300元

註冊完進去裡面找到下面這個頁面， 獲取企業id

image.png

選擇一個微信客服，獲取微信客服url
image.png

使用: fluwx 的 openWeChatCustomerServiceChat 方法


#App.customerServiceUrl 客服url
#corpId企業id
openWeChatCustomerServiceChat(url:App.customerServiceUrl,corpId: App.corpId);

相關文章