美文网首页Angularionic2实战ionic3开发集锦
ionic2 + cordova 插件实现QQ、微信、微博 第三

ionic2 + cordova 插件实现QQ、微信、微博 第三

作者: Jarvan丶 | 来源:发表于2017-07-25 17:03 被阅读889次

    1.首先和所有的都一样,要分别到各个开放平台申请appid,添加测试账号

    QQ:腾讯开放平台 http://open.qq.com/
    微信:微信开放平台 https://open.weixin.qq.com/
    微博:新浪微博开放平台 http://open.weibo.com/

    2.通过cordova添加插件

    QQ:

    cordova plugin add cordova-plugin-qqsdk --variable QQ_APP_ID=YOUR_QQ_APPID
    

    微信:

    cordova plugin add cordova-plugin-wechat  --variable wechatappid=YOUR_WECHAT_APPID
    

    微博:

    cordova plugin add cordova-plugin-weibosdk --variable WEIBO_APP_ID=YOUR_WEIBO_APPID
    

    3.1微博需要进一步去设置redirecturi

    在你的config.xml文件中添加
    <preference name="REDIRECTURI" value="YOUR_WEIBO_REDIRECTURI" />
    必须要和微博开放平台里面的OAuth2.0 授权设置的一样

    3.2 QQ需要装@ionic-native/qqsdk

    npm install @ionic-native/qqsdk --save
    

    3.3 微信、微博需要在编译文件中声明变量

    declare var Wechat:any;
    declare var WeiboSDK:any;
    

    之后就能在需要的地方直接使用Wechat.XXX 或者 WeiboSDK.XXX方法


    4.第三方登录代码

    4.1 QQ第三方登录:

    需要引入QQSDK模块

    import { QQSDK,QQShareOptions } from '@ionic-native/qqsdk';
    
    constructor(public qq:QQSDK);
    
    QQLogin(){
        const loginOptions: QQShareOptions = {
          client: this.qq.ClientType.QQ,
        };
        this.qq.ssoLogin(loginOptions)
          .then((result) => {
            console.log('shareNews success');
            alert('token is ' + result.access_token);
            alert('userid is ' + result.userid);
          })
          .catch(error => {
            console.log(error);
          });
    }
    
    4.2 微信、微博第三方登录
      sinaLogin(){
        WeiboSDK.ssoLogin(function (args) {
          alert('access token is ' + args.access_token);
          alert('userId is ' + args.userId);
        }, function (failReason) {
          alert(failReason);
        });
      }
      wechatLogin(){
        let scope = "snsapi_userinfo",
          state = "_" + (+new Date());
        Wechat.auth(scope, state, function (response) {
          // you may use response.code to get the access token.
          alert(JSON.stringify(response));
        }, function (reason) {
          alert("Failed: " + reason);
        });
      }
    

    需要注意:
    微信需要认证才能使用;

    微博:
    如果微博报错redirect_uri_mismatch 的话 请看3.1 设置redirecturi

    如果微博报错sso package or sign error 的话 需要在你的XCode里面的Info找到Bundle identifier这一项,复制粘贴到微博开放平台你的app中的 bundle id 中 保持两者值一致

    5.分享和登录用法一致、安装好插件参考readme文档

    ------end------

    相关文章

      网友评论

      • EddyWorkHard:你好,我申请了QQ的appid,value值中也附了值。写入QQLogin的方法之后,点击调用,什么反应都没有。在真机上测试的,请问为什么呢?
        Jarvan丶:@Tsmo 腾讯开放平台里面 应用调试者 配置需要登录的qq了没 测试版的 需要在里面配置才能用 正式版的 都能用
        EddyWorkHard:@Jarvan丶 <plugin name="cordova-plugin-qqsdk" spec="^0.9.7">
        <variable name="QQ_APP_ID" value="1106707937" />
        </plugin>

        <a (click)=" QQLogin()">
        <button ion-button block>qq登录</button>
        </a>

        QQLogin(){
        const loginOptions: QQShareOptions = {
        client: this.qq.ClientType.QQ,
        };
        this.qq.ssoLogin(loginOptions)
        .then((result) => {
        console.log('shareNews success');
        alert('token is ' + result.access_token);
        alert('userid is ' + result.userid);
        })
        .catch(error => {
        console.log(error);
        });
        }
        Jarvan丶:@Tsmo 有代码没 我看下
      • 马来西亚一分钟:微信如何提取用户的头像和姓名,需要前端显示出来
        Jarvan丶:@何雨阳 已私信
        马来西亚一分钟:现在按照教程 第三方登录已经可以调出微信 并且alert出来response的Json值,可是如何提取微信的用户资料呢?
        马来西亚一分钟:加下您微信咨询一下好么 弄了好久了一直出问题 急哭了
      • e3b2a22aeccf:sdk已经安装 在App里面点击无响应,咋回事呢
        Jarvan丶:测试版需要在对应的开放平台添加测试账号到应用调试者一栏
      • bc795beaa94c:微信需要在编译文件下申明变量,那个编译文件是在哪个地方啊
        Jarvan丶:在 项目名字 > src 里面有一个 xxx.d.ts 文件 我的是typings.d.ts 里面
      • DevonKong:微博登录直接闪退
        Jarvan丶:微博的可能是微博开放平台里面有一个添加测试账号,测试时候只有添加的测试帐号可以测试不闪退,上限15个 ,正式之后就都能用了

      本文标题:ionic2 + cordova 插件实现QQ、微信、微博 第三

      本文链接:https://www.haomeiwen.com/subject/emawkxtx.html