Cordova iOS 项目中微信/qq/Apple ID插件的安装以及登录的实现

说明：我们在做项目的时候，往往会接入第三方登录，使用官方或者已经大神已经写好的插件，不仅节省时间，而且可以加快我们项目开发的进度，本文章记录我在工程中所用到的几个第三方登录，一方面为了防止时间长了忘记，另一方面也给Cordova初学者提供一点思路和帮助。

一、cordova 微信插件的安装和实现登录获取用户相关信息

1、现在微信开发者平台申请获取项目所需要的微信APPID(具体怎么申请设置请参考微信官网或问度娘)以及设置好需要的UNIVERSAL_LINK（怎么设置参考我之前写的universal link设置这篇文章），防止微信二次跳转授权。

2、安装cordova-plugin-wechat插件

//插件地址
https://github.com/xu-li/cordova-plugin-wechat
//安装方法
cordova plugin add cordova-plugin-wechat  --variable wechatappid=YOUR_WECHAT_APPID --variable universallink=YOUR_UNIVERSAL_LINK

把YOUR_WECHAT_APPID和YOUR_UNIVERSAL_LINK替换成你申请的appid和universal link即可。

3、检测微信是否安装以及实现登录获取用户信息

//检测微信是否安装
function isWxInstalled() {Wechat.isInstalled(function (installed) {console.log("是否安装微信: " + (installed ? "是" : "否"));}, function (reason) {console.log("Failed: " + reason);});}

//微信授权登录获取信息
function weixin_login() {var scope = "snsapi_userinfo";var state = "_" + (+new Date());var appid = "你微信的appid";var appSecret = "与appid相对应的密钥";// 第一步：请求CODEWechat.auth(scope, state, function (response) {// you may use response.code to get the access token.// alert("第一步获取code值："+JSON.stringify(response));//获取第一步得到的code值var code = response.code;// 第二步：通过code获取access_token   在这里就从微信返回了app，以下都是在app里进行的操作了var url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appid + "&secret=" + appSecret + "&code=" + code + "&grant_type=authorization_code";$.get(url, function (data) {//  alert("第二步获取access_token：" + data);var resultjson = $.parseJSON(data);//获取access_tokenvar accessToken = resultjson.access_token;var openid = resultjson.openid;// 第三步：通过access_token调用接口var url1 = "https://api.weixin.qq.com/sns/auth?access_token=" + accessToken + "&openid=" + openid;$.get(url1, function (result) {// alert("第三步验证access_token授权是否有效："+result);var jsonParam = $.parseJSON(result);var stateMsg = jsonParam.errmsg;// 第四步：检验授权凭证（access_token）是否有效if ("ok" == stateMsg) {// 第五步：获取用户个人信息（UnionID机制）var url2 = "https://api.weixin.qq.com/sns/userinfo?access_token=" + accessToken + "&openid=" + openid;$.get(url2, function (res) {// alert("第四步获取用户信息："+res);var userinfo = $.parseJSON(res);var wxOpenid = userinfo.openid; //微信openidvar nickName = userinfo.nickname; //微信昵称var sex = userinfo.sex; //性别var language = userinfo.language;//微信所用语言var city = userinfo.city;//所在城市var province = userinfo.province;//所在省份var country = userinfo.country;//所在国家var headImgUrl = userinfo.headimgurl;//头像url地址var unionid = userinfo.unionid;//微信unionid//alert("取出需要的用户信息：wxOpenid="+wxOpenid+",性别="+sex+",昵称="+nickName+",所在地区="+country+",unionid="+unionid+",用户头像地址="+headImgUrl+",所用语言="+language);//请在这里写关于登录的业务代码,写完后请将alert弹窗注释掉console.log("微信授权登录成功");              })} else {// 请重新获取access_token}});});}, function (reason) {// alert("Failed: " + reason);});}

注：为了数据的安全，微信授权后最好将获取用户信息放在服务端去做，这里我为了方便演示，放在了客户端实际工程中，最好不要这样写。

二、cordova-plugin-qqsdk 插件的安装和实现登录获取用户相关信息

1、前提：在腾讯开放平台申请获取到项目需要的 QQ_APP_ID

2、安装cordova-plugin-qqsdk插件

//插件地址
https://github.com/iVanPan/Cordova_QQ
//安装方法
cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=YOUR_QQ_APPID

安装时把YOUR_QQ_APPID替换成你申请的QQ_APPID即可。

3、检测QQ是否安装以及实现登录获取用户信息

//检测QQ是否安装
function isQQInstalled() {var args = {};args.client = QQSDK.ClientType.QQ;//QQSDK.ClientType.QQ,QQSDK.ClientType.TIM;QQ代表检测的是QQ客户端，TIM代表检测的是TIM客户端，这里根据需要写或者要求判断吧QQSDK.checkClientInstalled(function () {alert('client is installed');}, function () {// if installed QQ Client version is not supported sso,also will get this erroralert('client is not installed');}, args);
}

        //腾讯qq登录function tencentqq_login() {var args = {};args.client =QQSDK.ClientType.QQ;//QQSDK.ClientType.QQ,QQSDK.ClientType.TIM;QQ代表检测的是QQ客户端，TIM代表检测的是TIM客户端，这里根据需要写或者要求判断吧QQSDK.ssoLogin(function (result) {var access_token = result.access_token;//授权成功后的token值var userid = result.userid;//qq用户useridvar expires_time = result.expires_time;//token过期时间戳var qq_appid = '你qq的appid';//获取用户的头像、昵称、性别以及是否是黄钻等信息var url = 'https://graph.qq.com/user/get_user_info?access_token=' + access_token + '&oauth_consumer_key=' + qq_appid + '&openid=' + userid;$.get(url, function (res) {var jsonParam = $.parseJSON(res);var qq_ret_code = jsonParam.ret;//返回码，为0则是正确的var qq_msg = jsonParam.msg;//返回正常则没有提示信息if (qq_ret_code == 0) {//正常返回var qq_nickName = jsonParam.nickname;//qq昵称var qq_gender = jsonParam.gender;//性别：值为男或者女，默认为男var qq_gender_type = jsonParam.gender_type;//性别标志：1；男 0-女                     console.log("QQ授权成功");} else {//返回错误，显示提示信息//alert(qq_msg);}})}, function (failReason) {//alert(failReason);}, args);}

注：同上面一样，为了数据的安全，QQ授权后最好将$.get()获取用户信息放在服务端去做，这里我为了方便演示，放在了客户端实际工程中，最好不要这样写。

三、cordova-plugin-sign-in-with-apple插件的安装以及授权登录获取用户信息

说明：自从ios更新到13.0以后，如果想在iOS工程中添加第三方登录，那么你就必须添加apple id 登录功能，不然你提交到苹果应用商店审核的时候会被拒，所以此插件只支持ios>=13.0的设置。

1、在安装这个插件之前，你需要登录苹果开发者中心，在你的项目中把sign-in-with-apple服务权限勾选上，否则你安装不上这个插件，如下图：

2、安装cordova-plugin-sign-in-with-apple插件

//插件地址
https://github.com/twogate/cordova-plugin-sign-in-with-apple
//安装方法
cordova plugin add cordova-plugin-sign-in-with-apple

更多详情信息请前往插件地址

3、实现apple id登录的方法

//iOS apple id 授权登录
function appleid_login() {window.cordova.plugins.SignInWithApple.signin({requestedScopes: [0, 1]},function (succ) {var result = succ;//邮箱，第一次授权登录时才会获取到，后面是获取不到的var email = result.email;//short-lived token used by your app for proof of authorization when interacting with the app’s server counterpart//每次登录时的授权代码都不一样var authorizationCode = result.authorizationCode;//姓名信息，第一次授权登录时才会获取到，后面是获取不到的var fullName = result.fullName;var nickname = fullName.nickname;var familyName = fullName.familyName;//姓var givenName = fullName.givenName;//名//JSON Web Token (JWT) that securely communicates information about the user to your app//安全验证tokenvar identifyToken = result.identityToken;//arbitrary string that your app provided to the request that generated the credential//应用程序为生成凭据的请求提供的任意字符串var state = result.state;//identifier associated with the authenticated user//身份信息，这个是不变的，第一次授权后，后面每次登录都是一样的var user = result.user;//alert('email=' + email + ',nickname=' + nickname + ',familyName=' + familyName + ',givenName=' + givenName + ',authorizationCode=' + authorizationCode + ',identifyToken=' + identifyToken + ',user=' + user);console.log("AppleId授权成功");},function (err) {console.error(err);var result = err;if (result.code == '1001' || result.code == '1003') {// alert('user cancelled');}if (result.code == '1000') {// alert('authorization attempt failed for an unknown reason.');}if (result.code == '1002') {// alert('authorization request received an invalid response.')}})}

注：以上就是微信、QQ和Apple ID插件的安装和授权登录获取信息的实现，特别说明，这些插件都不是我本人所写，都是github上的大神和官方出版的，请大家尊重别人的劳动成果和开源协议！谢谢！

Cordova iOS 项目中微信/qq/Apple ID插件的安装以及登录的实现相关推荐

对hash签名失败_vue项目中微信jssdk在ios签名失败
一.问题描述 1. vue项目中微信jssdk签名时,在安卓和ios是有差异的,签名时使用的url=window.location.href.split('#')[0],此时在安卓没问题,在ios会导 ...
iOS 11.3 显示：Apple ID 或将实现微信式扫码登陆
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 据外媒 9to5mac 近日报道,苹果似乎在筹备基于 "iCloud 个人数据&q ...
教你如何在iOS项目中设置各种字体
原文地址为: 教你如何在iOS项目中设置各种字体在iOS开发中设置字体的方法有很多种,下面为大家介绍比较常用的三种方法 1.使用系统默认提供的字体系统默认提供的字体主要是指UIFont中提供的字体 ...
iOS项目中的网络请求和上下拉刷新封装
代码地址如下: http://www.demodashi.com/demo/11621.html 一.运行效果图现在的项目中不可避免的要使用到网络请求,而且几乎所有软件都有上下拉刷新功能,所以我在此 ...
XamarinSQLite教程Xamarin.iOS项目中打开数据库文件
XamarinSQLite教程Xamarin.iOS项目中打开数据库文件以下是打开MyDocuments.db数据库的具体操作步骤: (1)将Mac电脑上的MyDocuments.db数据库移动到W ...
XamarinSQLite教程在Xamarin.iOS项目中定位数据库文件
XamarinSQLite教程在Xamarin.iOS项目中定位数据库文件开发者可以在指定的路径中找到复制的数据库文件,具体的操作步骤如下: (1)单击Mac电脑中Finder菜单中的"前 ...
在Xamarin.iOS项目中使用预设数据库
在Xamarin.iOS项目中使用预设数据库当开发者准备好一个预设数据库文件后,就可以将这个数据库文件添加到创建的项目中了.本节将分别在Xamarin.iOS和Xamarin.Android项目中使 ...
php第三方登录代码,thinkPHP5项目中实现QQ第三方登录功能
本文实例讲述了thinkPHP5项目中实现QQ第三方登录功能.分享给大家供大家参考,具体如下: 最近用thinkPHP 5框架做了一个婚纱店的项目,在开发过程中需要用到第三方登录,腾讯官方给的案例是几 ...
给iOS项目中添加图片，并通过UIImageView引用和显示该UIImage图片
[问题] 关于iOS/iPhone中的文件选择对话框,用于用户去选择图片等文件过程中,问题转换为,需要给当前iOS项目中,添加一个图片. 类似于Windows开发中的资源文件,其中图片文件属于资源的 ...

Cordova iOS 项目中微信/qq/Apple ID插件的安装以及登录的实现

Cordova iOS 项目中微信/qq/Apple ID插件的安装以及登录的实现相关推荐

最新文章

热门文章