1、_網(wǎng)頁(yè)端知識(shí)要點(diǎn)1. 網(wǎng)頁(yè)資料npm庫(kù)阮一峰的OAuth2 OAuth2.0的 碼模式 main&id=mp1421140842 2 0.html碼模式（authorization code）是功能最完整、流程最嚴(yán)密的 模式。它的特點(diǎn)就是通過(guò)客戶(hù)端的后臺(tái)服務(wù)器，與服務(wù)提供商的認(rèn)證服務(wù)器進(jìn)行互動(dòng)。（A） 用戶(hù) 客戶(hù)端，后者將前者導(dǎo)向認(rèn)證服務(wù)器。（B） 用戶(hù)選擇是否給予客戶(hù)端 。（C） 假設(shè)用戶(hù)給予 ，認(rèn)證服務(wù)器將用戶(hù)導(dǎo)向客戶(hù)端事先指定的重定向URI（redirection URI），同時(shí)附上一個(gè) 碼。（D） 客戶(hù)端收到 碼，附上早先的重定向URI，向認(rèn)證服務(wù)器申請(qǐng)令牌。這一步是在客戶(hù)端的 的服務(wù)

2、器上完成的，對(duì)用戶(hù)不可見(jiàn)。開(kāi)課吧web全棧架構(gòu)師（E）認(rèn)證服務(wù)器核對(duì)了 碼和重定向URI，確認(rèn)無(wú)誤后，向客戶(hù)端 令牌（access token）和更新令牌（refresh token）。獲取用戶(hù)信息 - 相當(dāng)于普通網(wǎng)頁(yè)的用戶(hù)登錄生成認(rèn)證URL跳轉(zhuǎn) 認(rèn)證服務(wù)回調(diào)服務(wù)端 獲取code調(diào)用 接口 AccessToken與OpenId調(diào)用服務(wù)器端接口開(kāi)課吧web全棧架構(gòu)師1. 配置網(wǎng)頁(yè)回調(diào)2. 配置JS安全接口1 網(wǎng)頁(yè)端網(wǎng)頁(yè) 登錄獲取用戶(hù)信息/ wechat/index.html async auth () window.location.href = /wxAuthorize,1. 初始化Oauth

3、開(kāi)課吧web全棧架構(gòu)師/ index.jsconst OAuth = require(co-wechat-oauth);const oauth = new OAuth(conf.appid, conf.appsecret);2. 生成用戶(hù)URL/ index.js/ 生成引導(dǎo)用戶(hù)點(diǎn)擊的 URLrouter.get(/wxAuthorize, async (ctx, next) = const state = ctx.query.id/ const target = ctx.hrefconsole.log(ctx. + ctx.href)/ 目標(biāo)地址redirectUrl = ctx.hrefr

4、edirectUrl = redirectUrl.replace(wxAuthorize, wxCallback) const scope = snsapi_userinfovar url = oauth.getAuthorizeURL(redirectUrl, state, scope); console.log(url + url)ctx.redirect(url)3. 獲取用戶(hù)回調(diào) AccessToken與OpenId/ index.js/ 獲取AccessTokenrouter.get(/wxCallback, async (ctx, next) = const code = ctx.

5、query.code / 碼console.log(getAccessToken, code)var token = await oauth.getAccessToken(code); var accessToken = token.data.access_token; var openid = token.data.openid; console.log(getAccessToken.)console.log(accessToken, accessToken) console.log(openid, openid)/ ctx.body = tokenctx.redirect(/?openid

6、= + openid)4. 用戶(hù)信息開(kāi)課吧web全棧架構(gòu)師/ index.html async getUser()const qs = Qs.parse(window.location.search.substr(1) const openid = qs.openidconst res = await axios.get(/getUser, params:openid)console.log(User,res.data),/ index.jsrouter.get(/getUser, async (ctx, next) = const openid = ctx.query.openid cons

7、ole.log(getUser, openid)var userInfo = await oauth.getUser(openid); console.log(userInfo:, userInfo) ctx.body = userInfo)5. AccessToken緩存問(wèn)題開(kāi)課吧web全棧架構(gòu)師/ mongo.js/ ClientAccessToken/ mongoose.jsconst mongoose = require(mongoose) const Schema = mongoosemongoose.connect(mongodb:/localhost:27017/weixin,

8、useNewUrlParser: true, () = console.log(Mongodb connected.)exports.ServerToken = mongoose.m (ServerToken, accessToken: String);/ ClientAccessToken schema = new Schema(access_token: String, expires_in: Number, refresh_token: String, openid: String,scope: String, create_at: String);const OAuth = requi

9、re(co-wechat-oauth);const oauth = new OAuth(conf.appid, conf.appsecret, async function (openid) return await ClientToken.getToken(openid),async function (openid, token) return await ClientToken.setToken(openid, token)2. JSSDK資料：npm庫(kù)：是開(kāi)發(fā)者在網(wǎng)頁(yè)上通過(guò)JavaScript代碼使用 main&id=mp1421141115(獲取JSCong)原生功能的工具包，開(kāi)發(fā)者

10、可以使用它在網(wǎng)頁(yè)上錄制和 微信語(yǔ)音、上傳 本地圖片、拍照等許多能力運(yùn)行于 內(nèi)置瀏覽器的網(wǎng)頁(yè)調(diào)用 原生應(yīng)用如：拍照、語(yǔ)音、掃一掃功能 查到的數(shù)據(jù)不同圖像接口音頻接口開(kāi)課吧web全棧架構(gòu)師/ 自定義getToken方法schema.statics.getToken = async function (openid) return await this.findOne(openid: openid);schema.statics.setToken = async function (openid, token) / 有則更新，無(wú)則添加const query = openid: openid;cons

11、t options = upsert: true;return await this.updateOne(query, token, options);exports.ClientToken = mongoose.m (ClientToken, schema);/ index.js/ 獲取JSConfig router.get(/getJsConfig, async ctx = console.log(getJSSDK., ctx.query)var res = await api.getJsConfig(ctx.query); console.log(res, res)ctx.body = res)/ index.html/ index.htmlgetJSConfig: async function () console.log(wx:, wx)let res = await axios.get(/getJSConfig, params: url: window.location.href)console.log(res., res.data)res.data.jsApiList = on ShareTimeline, on ShareAppMessage wx.config(res.data);wx.ready(function () console.log(wx.read