无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

H5游戏营销需要创意-基于koa实现小程序授权登录

时间:2021-04-16 10:07来源:H5游戏营销需要创意 作者:jianzhan 点击:
一.手机微信微信小程序获得code在手机微信微信小程序中通快递过wx.login(Object)获得code wx.login({success: function(res) {if(res res.code) {//res.code即是获得的的code二.网络服务器端接纳code 获得到c
--------

H5游戏营销需要创意

-------

一.手机微信小程序获得code

在手机微信小程序中根据wx.login(Object)获得code

wx.login({
 success: function(res) {
 if(res res.code) {
 //res.code即为获得的的code

二.服务器端接纳code

获得到code后,需要将code以api插口启用的方法传送到服务器,服务端根据koa完成,此处将服务器端接受到的code,原样回到给前端开发,以认证服务器端是不是一切正常接受到code

get方法

前端开发(小程序)

wx.login({
 success: function(res) {
 if(res res.code) {
 wx.request({
 url: 'api/v1/member/code2token',
 method: "GET",
 data: {
 code: res.code
 success: function(res) {
 console.log("res", res)
})

wx.login({
 success: function(res) {
 if(res res.code) {
 wx.request({
 url: 'api/v1/member/code2token?code=' + res.code,
 method: "GET",
 success: function(res) {
 console.log("res", res)

服务端

const Router = require('koa-router')
const router = new Router()
router.get('/api/v1/member/code2token', async (ctx, next) = {
 const code = ctx.request.query.code
 ctx.body = code
module.exports = router

post方法
koa获得post恳求主要参数,需要从ctx.request.body中获得,因而需要安裝koa-body正中间件,并申请注册该正中间件

sudo npm install koa-body
1
// /projectDirectory/app.js
const Koa = require('koa')
const body = require('koa-body')
const app = new Koa()
app.use(body())
...

前端开发(小程序)

wx.login({
 success: function(res) {
 if(res res.code) {
 wx.request({
 url: 'api/v1/member/code2token',
 method: "POST",
 data: {
 code: res.code
 success: function(res) {
 console.log("res", res)

服务端

const Router = require('koa-router')
const router = new Router()
router.post('/api/v1/member/code2token', async (ctx, next) = {
 const code = ctx.request.body.code
 ctx.body = code
module.exports = router


三.根据code换取openId

服务端在获得到code后,根据启用手机微信小程序的服务端api - code2Session 换取openId,此处将服务器端换取openId的互联网恳求結果,原样回到给前端开发

安裝axios

sudo npm install axios
1

前端开发(小程序)

wx.login({
 success: function(res) {
 if(res res.code) {
 wx.request({
 url: 'api/v1/member/code2token',
 method: "POST",
 data: {
 code: res.code
 success: function(res) {
 console.log("res", res)

服务端

const Router = require('koa-router')
const router = new Router()
const axios = require('axios')
router.post('/api/v1/member/code2token', async (ctx, next) = {
 const code = ctx.request.body.code
 //获得openid,appID和appSecret为申请办理小程序后的信息内容
 const {appID, appSecret} = global.config.miniprogram
 const {data} = await axios.get(`sns/jscode2session?appid=${appID} secret=${appSecret} js_code=${code} grant_type=authorization_code`, {})
 if(data.errcode) {
 throw new global.errors.ParameterException(data.errmsg)
 ctx.body = data
module.exports = router


四.根据openId分辨客户是不是存在

服务端获得到openId后,根据openID查寻数据信息库中是不是存在此条纪录,假如存在,通告前端开发客户登陆取得成功,不然通告前端开发客户不存在,此时前端开发需要将客户信息内容(包含:openid、头像、昵称、性別、电話号码数据加密信息内容)递交到服务器开展申请注册

联接数据信息库

const Sequelize = require('sequelize')
const {dbname, username, password, host, port} = global.config.db
const sequelize = new Sequelize(dbname, username, password, {
 dialect: 'mysql', //数据信息库种类
 host: host, //数据信息库详细地址
 logging: true, //为true时,会在指令行中显示信息sql语句
 timezone: '+8:00', //时区,sequelize转化成的時间会与北京時间相差8小时
 port: port, //端口号号
 define: {
 timestam凡科抠图: false, //为false时,在根据Model建立数据信息库时,不会全自动建立createdAt、updatedAt字段
 paranoid: false, //为false时,在根据Model建立数据信息库时,不会全自动建立deletedAt字段
 createdAt: 'created_at',
 updatedAt: 'updated_at',
 deletedAt: 'deleted_at', //操纵在建立数据信息库表时,全自动转化成字段的姓名
 underscored: true, //为true时,在根据Model建立数据信息库时,会把全部字段的驼峰取名变成下划线取名
sequelize.sync({
 force: false //为true时,当数据信息库表构造产生转变时,sequelize会把原先的表删掉后再次建立,慎用

建立Model,根据Model建立数据信息库表和删改改查

// /projectDirectory/model/user.js
const {Sequelize, Model} = require('sequelize')
class User extends Model {
 //此处加上数据信息库表怎删改查的业务流程逻辑性
 static async findByOpenID(openid) {
 const r = await User.findOne({
 where: {
 openid: openid
 return r
 static async add(openid,avatar,nickname,gender,phone) {
 const r = await User.create({
 openid: openid,
 avatar: avatar,
 nickname: nickname,
 gender: gender,
 phone: phone
 return r
User.init({
 id: {
 type: Sequelize.INTEGER, //种类
 primaryKey: true, //为true表明主键(唯一且不为空)
 autoIncrement: true, //为true表明自增
 openid: {
 type: Sequelize.STRING(64),
 unique: true //为true表明唯一
 avatar: {
 type: Sequelize.STRING 
 nickname: {
 type: Sequelize.STRING
 gender: {
 type: Sequelize.INTEGER
 phone: {
 type: Sequelize.STRING
 sequelize: global.sequelize
module.exports = User

分辨客户是不是早已申请注册

const Router = require('koa-router')
const router = new Router()
const axios = require('axios')
const User = require('../../../../model/user')
router.post('/api/v1/member/code2token', async (ctx, next) = {
 const code = ctx.request.body.code
 //获得openid
 const {appID, appSecret} = global.config.miniprogram
 const {data} = await axios.get(`sns/jscode2session?appid=${appID} secret=${appSecret} js_code=${code} grant_type=authorization_code`, {})
 if(data.errcode) {
 throw new global.errors.ParameterException(data.errmsg)
 const openid = data.openid
 //根据openID查寻数据信息库中是不是存在此条纪录,假如存在,转化成token回到顾客端,不然通告前端开发客户不存在
 // await User.add(openid)
 const res = await User.findByOpenID(openid)
 if(!res) {
 //客户不存在
 throw new global.errors.UserNotFoundException()
 } else {
 //客户存在,立即登陆
 ctx.body = data
module.exports = router

五.小程序中检验到客户不存在时,将客户信息内容递交到服务器端开展申请注册
 view 
 view 
 view xxx小程序将应用您的客户信息内容开展登陆 /view 
 open-data type="userAvatarUrl" /open-data 
 open-data type="userNickName" lang="zh_CN" lang="zh_CN" /open-data 
 button open-type="getUserInfo" ="onGetUserInfo" 手机微信便捷登陆 /button 
 /view 
 view 
 view 登陆即意味着您已阅读文章并愿意 view 《客户申请注册协议书》 /view /view 
 view 未申请注册手机上号认证后将全自动为您建立账户 /view 
 /view 
 /view 
 mp-half-screen-dialog 
 bindbuttontap="buttontap"
 show="{{showPhoneDialog}}"
 maskClosable="{{true}}"
 closabled="{{false}}" 
 view slot="title" 手机微信受权登陆 /view 
 view slot="desc" xxx小程序想要获得您的手机上号 /view 
 view slot="footer" 
 button bindtap="onCancel" 撤销 /button 
 button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber" 确定 /button 
 /view 
 /mp-half-screen-dialog 
page{
 width: 100%;
 height: 100%;
 overflow: hidden;
.container {
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 background: #fff;
.wrapper {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 flex-grow: 1;
.ti凡科抠图 {
 width: 100%;
 color: #000;
 font-size: 28rpx;
 text-align: center;
.avatar {
 display: block;
 width: 160rpx;
 height: 160rpx;
 border-radius: 50%;
 margin-top: 20rpx;
 margin-bottom: 20rpx;
 box-sizing: border-box;
 overflow: hidden;
.nickname {
 color: #000;
 font-size: 28rpx;
 text-align: center;
 margin-bottom: 20rpx;
button.btn-login {
 width: 80% !important;
 height: 88rpx !important;
 color: #fff !important;
 background: #09BB07 !important;
 padding: 0 !important;
 margin: 0 !important;
 line-height: 88rpx !important;
 border-radius: 44rpx !important;
 box-sizing: border-box;
.bottom-ti凡科抠图 {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding-top: 40rpx;
 padding-bottom: 40rpx;
 font-size: 28rpx;
 box-sizing: border-box;
 line-height: 44rpx;
 align-self: flex-start;
.protect {
 display: inline-block;
 color: #09BB07;
.desc {
 width: 100%;
 text-align: center;
.footer {
 display: flex;
 flex-direction: row;
button.cancel {
 color: #09BB07;
button.confirm {
 color: #fff;
 background: #09BB07;
 margin-left: 20rpx !important;
//index.js
//获得运用案例
const app = getApp()
Page({
 data: {
 exist: false,
 showPhoneDialog: false
 onLoad: function(options) {
 var that = this
 wx.login({
 success: function(res) {
 if(res res.code) {
 wx.request({
 url: 'api/v1/member/code2token',
 method: "POST",
 data: {
 code: res.code
 success: function(res) {
 console.log("res", res)
 var code = res.data.code
 if(code == 0) {
 that.setData({
 exist: true
 } else {
 that.setData({
 exist: false
 onGetUserInfo: function(event) {
 var that = this
 var errMsg = event.detail.errMsg
 if(errMsg == "getUserInfo:ok") {
 var exist = that.data.exist
 var userInfo = event.detail.userInfo
 that.setData({
 userInfo: userInfo
 if(exist) {
 //将token存入缓存文件后,再次进到或本人管理中心网页页面,表明登陆取得成功
 return
 //弹出手机上号码受权弹窗
 wx.login({
 success: function(res) {
 if(res res.code) {
 that.setData({
 showPhoneDialog: true,
 code: res.code
 onGetPhoneNumber: function(event) {
 var that = this
 that.setData({
 showPhoneDialog: false
 var errMsg = event.detail.errMsg
 if(errMsg == "getPhoneNumber:ok") {
 var iv = event.detail.iv
 var encryptedData = event.detail.encryptedData
 var code = that.data.code
 var userInfo = that.data.userInfo
 var avatarUrl = userInfo.avatarUrl
 var nickName = userInfo.nickName
 var gender = userInfo.gender
 wx.request({
 url: 'api/v1/member/register',
 method: "POST",
 data: {
 code: code,
 avatarUrl: avatarUrl,
 nickName: nickName,
 gender: gender + "",
 iv: iv,
 encryptedData: encryptedData
 success: function(res) {
 var code = res.data.code
 if(code == 0) {
 that.setData({
 exist: true
 //将token存入缓存文件后,再次进到或本人管理中心网页页面,表明登陆取得成功
 } else {
 that.setData({
 exist: false
 onCancel: function(event) {
 var that = this
 that.setData({
 showPhoneDialog: false
})

这里涉及到到电話号码的信息内容,就不录屏展现了 ---------

H5游戏营销需要创意

------------ (责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信