ionic3 微信授权登录

1、安装微信插件

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

YOUR_WECHAT_APPID就是你申请的appid
注意:在微信开放平台创建应用的时候,appid是你的安装包签名的md5的值去掉冒号小写,如果这个不匹配,微信登录老闪退提示错误。

2、组件中引入微信服务,定义。

import { Component } from '@angular/core';
import { NavController, ViewController, LoadingController } from 'ionic-angular';
import { LoginInfoService } from "../../service/login-info.service";
import { Md5 } from "ts-md5/dist/md5";

// 引入微信服务
declare var Wechat: any;

后面既可以使用Wechat来调用微信里面的服务了。

3、具体代码

weChatAuth() {
        let loading = this.loadingCtrl.create({
            content: "跳转微信登录中...",//loading框显示的内容
            dismissOnPageChange: true, // 是否在切换页面之后关闭loading框
            showBackdrop: true  //是否显示遮罩层
        });
        loading.present();
        try {
            let scope = "snsapi_userinfo",
                state = "_" + (+new Date());
            // 1. 获取code
            Wechat.auth(scope, state, (response) => {
                var appId = "wx3bcebf4b5f8f9c22";
                let appSecret = "a530d135d97dd51cc73659e3874cb254";
                // 2. 获取token,openID
                Wechat.auth('https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appId + '&secret=' + appSecret + '&code=' + response.code + '&grant_type=authorization_code', function (accessTokenResponse) {
                    var accessToken = accessTokenResponse.access_token;
                    var openId = accessTokenResponse.openid;
                    console.log(accessTokenResponse);
                    // 3. 获取用户信息
                    Wechat.auth('https://api.weixin.qq.com/sns/userinfo?access_token=' + accessToken + '&openid=' + openId + '&lang=zh_CN', function (userInfoResponse) {
                        console.log(userInfoResponse); // 用户信息

                        // openid    普通用户的标识,对当前开发者帐号唯一
                        // nickname    普通用户昵称
                        // sex    普通用户性别,1为男性,2为女性
                        // province    普通用户个人资料填写的省份
                        // city    普通用户个人资料填写的城市
                        // country    国家,如中国为CN
                        // headimgurl    用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空
                        // privilege    用户特权信息,json数组,如微信沃卡用户为(chinaunicom)
                        // unionid    用户统一标识。针对一个微信开放平台帐号下的应用,同一用户的unionid是唯一的。
                    });
                });
            }, (reason) => {
                alert("Failed: " + reason);
            });
        } catch (error) {
            console.log(error);
        } finally {
            loading.dismiss();
        }

    }

如果不明白签名相关的问题可以看我上一篇文章:

https://segmentfault.com/a/1190000013830970

你可能感兴趣的:(ionic,微信登录)