微信登录实际上就是 通过微信开放平台的接口获取到微信用户的基本信息添加到用户数据库中,从而实现通过微信登录功能。

查阅微信开放平台的官方文档:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419317853&token=&lang=zh_CN

我们通过接口能够获取到的用户基本信息包括:openid (针对当前开发者账号的用户唯一标识)、nickname(用户昵称)、sex(用户性别)、province(省份)、city(城市)、country(国家)、headimgurl(头像)、privilege(特权信息)、unionid(针对同一个微信开放平台账号的用户统一标识)。用于微信登录功能这些信息已经足够了。这些信息如果获取,可以通过文档一步步反推。

需要获取基本信息API(https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID)前一步需要通过(https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code)获取到access_token 与 open_id,获取access_token 与 open_id的前置条件是需要appid、secret、code。 appid与secret两个参数都是通过创建开放平台时候生成的,获取code的文档 https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419317851&token=&lang=zh_CN 可以看出code需要通过客户端SDK获取。

所以CocosCreator接入微信登录最重要的就是如何通过微信开放平台SDK获取到code. 可以根据文档的方式集成SDK ;
Android:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=1417751808&token=&lang=zh_CN
IOS:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=1417694084&token=&lang=zh_CN

集成完成后唯一要做的就是通过jsb调用Native的方法,获取到code后,调用CocosCreator的JS方法将code回传到CocosCreator。 Android接入的代码如下

import AiJKit from "./ws/AiJKit";
import AppConfig from "./AppConfig";
import PlazaWeiXinLoginEvent from "./plazz/event/PlazaWeiXinLoginEvent";
import PlazaConfig from "./plazz/PlazaConfig";
import AlertWindow from "./AlertWindow";

export default class WxHelper {
    /**
     * 微信登录
     */
    public static wxLogin() {
        if (cc.sys.os == cc.sys.OS_ANDROID) {
            jsb.reflection.callStaticMethod("com/xiyoufang/aij/wx/WxHelper", "wxLogin", "()V")
        }
    }

    /**
     * 登录
     * @param code
     */
    public static onWxLogin(code) {
        cc.log("code:" + code);
        if (PlazaConfig.getInst()._aiJPro.isOpen()) {
            AiJKit.use(AppConfig.PLAZA_WS_NAME).send(new PlazaWeiXinLoginEvent(code));
        } else {
            AlertWindow.alert("提示信息", "未连接服务器,请稍后再试!");
        }
    }

}
cc['WxHelper'] = WxHelper;

点击界面的微信登录按钮,调用JS中的wxLogin方法,该方法调用Android的Java代码。Java代码如下:

package com.xiyoufang.aij.wx;

import android.util.Log;

import com.tencent.mm.opensdk.modelmsg.SendAuth;

import org.cocos2dx.javascript.AppActivity;

/**
 * Created by youfangxi@gmail.com on 2019-07-22.
 *
 * @author youfangxi@gmail.com
 */
public class WxHelper {

    public final static String WX_API_TAG = "WxApi";

    public static void print() {
        System.out.println("print from cocos creator!");
    }

    /**
     * 微信登录请求,提供给Cocos Creator调用.
     */
    public static void wxLogin() {
        SendAuth.Req req = new SendAuth.Req();
        req.scope = "snsapi_userinfo";
        req.state = "0";
        AppActivity.getInstance().wxApi.sendReq(req);  //发送登录请求
        Log.i(WX_API_TAG, req.state);
    }

}

还有一个重要的部分就是获取微信回调的结果,Java代码:

package net.yw365.jiong.wxapi;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;

import com.tencent.mm.opensdk.constants.ConstantsAPI;
import com.tencent.mm.opensdk.modelbase.BaseReq;
import com.tencent.mm.opensdk.modelbase.BaseResp;
import com.tencent.mm.opensdk.modelmsg.SendAuth;
import com.tencent.mm.opensdk.openapi.IWXAPIEventHandler;
import com.xiyoufang.aij.wx.WxHelper;

import org.cocos2dx.javascript.AppActivity;
import org.cocos2dx.lib.Cocos2dxJavascriptJavaBridge;

/**
 * Created by youfangxi@gmail.com on 2019-07-22.
 *
 * @author youfangxi@gmail.com
 */
public class WXEntryActivity extends Activity implements IWXAPIEventHandler {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        AppActivity.getInstance().wxApi.handleIntent(getIntent(), this);
    }

    /**
     * 
     * @param baseReq 请求报文
     */
    @Override
    public void onReq(BaseReq baseReq) {
        Log.i(WxHelper.WX_API_TAG, "onReq:" + baseReq.getClass().getSimpleName());
    }

    /**
     * 接收响应
     *
     * @param baseResp 响应报文
     */
    @Override
    public void onResp(BaseResp baseResp) {
        Log.i(WxHelper.WX_API_TAG, "onResp:" + baseResp.getClass().getSimpleName());
        switch (baseResp.errCode) {
            case BaseResp.ErrCode.ERR_OK:
                switch (baseResp.getType()) {
                    case ConstantsAPI.COMMAND_SENDAUTH: {   //授权响应
                        final String code = ((SendAuth.Resp) baseResp).code;
                        AppActivity.getInstance().runOnGLThread(new Runnable() {
                            @Override
                            public void run() {
                                //将code 传递到cocoscreator.
//                                Cocos2dxJavascriptJavaBridge.evalString("cc.log(\"code:" + code + "\")");
                                Cocos2dxJavascriptJavaBridge.evalString("cc.WxHelper.onWxLogin(\"" + code + "\")");
                            }
                        });
                        break;
                    }
                    case ConstantsAPI.COMMAND_SENDMESSAGE_TO_WX: {  //发送信息到微信的响应

                        break;
                    }
                    default:
                        break;
                }
                break;
            case BaseResp.ErrCode.ERR_AUTH_DENIED:
                break;
            case BaseResp.ErrCode.ERR_USER_CANCEL:
                break;
            case BaseResp.ErrCode.ERR_SENT_FAILED:
                break;
            case BaseResp.ErrCode.ERR_BAN:
                break;
            case BaseResp.ErrCode.ERR_COMM:
                break;
            case BaseResp.ErrCode.ERR_UNSUPPORT:
                break;
        }
        finish();   //关闭当前界面
    }
}

可以看出获取到Code后通过Cocos2dxJavascriptJavaBridge.evalString(“cc.WxHelper.onWxLogin(\”” + code + “\”)”);方式将code回传到CocosCreator的cc.WxHelper.onWxLogin方法。
此处需要特别注意的就是WxHelper这个JS里的 cc[‘WxHelper’] = WxHelper; 这句一定要加上不能喽,否则Cocos2dxJavascriptJavaBridge.evalString(“cc.WxHelper.onWxLogin(\”” + code + “\”)”);将执行失败。

获取到Code后剩下的就是将Code传给游戏后端,后端调用另外两个API接口获取到用户信息并且保存到数据库中。

完整代码可以查看我的开源项目:https://gitee.com/xiyoufang/aij

打赏
CocosCreator接入微信登录
Tagged on:         

发表评论