flutter第三方登录(微信/QQ)

微信登录

1、安装依赖

dependencies:
  fluwx: ^3.12.2

2、配置

android

无需配置

iOS

1.配置Universal Links

image.png

2.在 Xcode 中,选择工程设置项,选中“TARGETS”,在“info”标签栏的“URL type“添加“URL scheme”为appID
image.png

3.在 Xcode 中,选择你的工程设置项,选中“TARGETS”一栏,在 “info”标签栏的“LSApplicationQueriesSchemes“添加weixin、weixinULAPI、weixinURLParamsAPI
image.png

详情参考:微信官方iOS接入指南文档

3、dart层代码使用

注册wxApi

registerWxApi(appId: "替换对应的appID",universalLink: "https://替换对应的universalLink");

拉起微信登录

  void wxLogin() {
    fluwx.sendWeChatAuth(scope: "snsapi_userinfo", state: "wechat_sdk_demo_test").then((data) {
      if (!data) {
        print("没有安装微信,请安装微信后使用该功能");
      }
    }).catchError((e) {
      print('weChatLogin error $e');
    });
  }

监听微信登录

late StreamSubscription<fluwx.BaseWeChatResponse> wxStream;

wxStream = fluwx.weChatResponseEventHandler.distinct((a, b) => a == b).listen((res) {
      if (res is fluwx.WeChatAuthResponse) {
        int errCode = res.errCode!;
        // print('微信登录返回值:ErrCode :$errCode  code:${res.code}  ');

        if (errCode == 0) {
          String code = res.code!;
          wxLoginAuth(code);
        } else if (errCode == -4) {
          BotToast.showText(text: "用户拒绝授权");
        } else if (errCode == -2) {
          BotToast.showText(text: "用户取消授权");
        }
      }
    });

微信登录验证

void wxLoginAuth(String code) async {
    ThirdApi().wechatLoginAuth(code).then((response) {
      Map map = json.decode(response.data);
      ThirdApi().getWechatUserInfo(map["access_token"], map["openid"]).then((response) {
        Map userInfo = json.decode(response.data);

        // 这里再调自己业务层的登录接口处理
        // ···
      });
    });
  }

登录验证接口

// 微信登录验证
  Future<Response> wechatLoginAuth(String code) async {
    return await Dio().get(
      "https://api.weixin.qq.com/sns/oauth2/access_token",
      queryParameters: {
        "appid": "填写appid",
        "secret": "填写secret",
        "code": code,
        "grant_type": "authorization_code"
      },
    );
  }

获取微信用户信息

// 微信用户信息
  Future<Response> getWechatUserInfo(String accessToken, String openid) async {
    return await Dio().get(
      "https://api.weixin.qq.com/sns/userinfo",
      queryParameters: {
        "access_token": accessToken,
        "openid": openid,
      },
    );
  }

更多接口详情查阅官方文档移动应用微信登录开发指南

QQ登录

1、安装依赖

dependencies:
    tencent_kit: ^4.0.0

2、配置

android

配置appID

android {
    defaultConfig{
        addManifestPlaceholders([
                TENCENT_APP_ID: "your tencent appId"
        ])
      // 或者
       //  manifestPlaceholders += [
       //         TENCENT_APP_ID: "your tencent appId"
       // ]
    }
}
iOS

1.配置Universal Links
Universal Links
Signing&Capabilities -> Associated Domain -> Domains -> your Universal Links
2.在 Xcode 中,选择工程设置项,选中“TARGETS”,在“info”标签栏的“URL type“添加“URL scheme”为appID
tencent: identifier=tencent schemes=tencent${appId}
3.在 Xcode 中,选择你的工程设置项,选中“TARGETS”一栏,在 “info”标签栏的“LSApplicationQueriesSchemes“添加

<key>LSApplicationQueriesSchemes</key>
    <array>
        <string>tim</string>
        <string>mqq</string>
        <string>mqqapi</string>
        <string>mqqbrowser</string>
        <string>mttbrowser</string>
        <string>mqqOpensdkSSoLogin</string>
        <string>mqqopensdkapiV2</string>
        <string>mqqopensdkapiV4</string>
        <string>mqzone</string>
        <string>mqzoneopensdk</string>
        <string>mqzoneopensdkapi</string>
        <string>mqzoneopensdkapi19</string>
        <string>mqzoneopensdkapiV2</string>
        <string>mqqapiwallet</string>
        <string>mqqopensdkfriend</string>
        <string>mqqopensdkavatar</string>
        <string>mqqopensdkminiapp</string>
        <string>mqqopensdkdataline</string>
        <string>mqqgamebindinggroup</string>
        <string>mqqopensdkgrouptribeshare</string>
        <string>tencentapi.qq.reqContent</string>
        <string>tencentapi.qzone.reqContent</string>
        <string>mqqthirdappgroup</string>
        <string>mqqopensdklaunchminiapp</string>
        <string>mqqopensdkproxylogin</string>
        <string>mqqopensdknopasteboard</string>
        <string>mqqopensdkcheckauth</string>
    </array>

3、dart层代码使用

初始化

await Tencent.instance.setIsPermissionGranted(granted: true); // 授权
await Tencent.instance.registerApp(appId: "appId");

拉起qq登录

 void qqLogin() async {
    bool isInstalledQQ = await Tencent.instance.isQQInstalled();
    bool isInstalledTIM = await Tencent.instance.isTIMInstalled();
    if (isInstalledQQ || isInstalledTIM) {
      Tencent.instance.login(scope: <String>[TencentScope.GET_SIMPLE_USERINFO]);
    } else {
      BotToast.showText(text: "没有安装QQ,请安装QQ后使用该功能");
    }
  }

监听

  late final StreamSubscription<BaseResp> qqStream;
  LoginResp? _qqLoginResp;

   qqStream = Tencent.instance.respStream().listen(_listenQQLogin);

void _listenQQLogin(BaseResp resp) {
    if (resp is LoginResp) {
      _qqLoginResp = resp;
      if (resp.openid != null && resp.accessToken != null) {
        getQQUserInfo();
      }
    }
  }

获取qq用户信息

 void getQQUserInfo() async {
    showLoadingDialog("正在登录");

    if ((_qqLoginResp?.isSuccessful ?? false) && !(_qqLoginResp!.isExpired ?? true)) {
      await ThirdApi()
          .getQQUserInfo(_qqLoginResp!.accessToken!, _qqLoginResp!.openid!)
          .then((response) {
        Map _userInfo = json.decode(response.data);
        if (_userInfo["ret"] == 0) {
          
 // 这里再调自己业务层的登录接口处理
        // ···
        
    }
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容