02課開發(fā)網(wǎng)頁端瑞客論壇

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

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

3、開課吧web全棧架構(gòu)師/ index.jsconst OAuth = require(co-wechat-oauth);const oauth = new OAuth(conf.appid, conf.appsecret);2. 生成用戶URL/ index.js/ 生成引導(dǎo)用戶點擊的 URLrouter.get(/wxAuthorize, async (ctx, next) = const state = ctx.query.id/ const target = ctx.hrefconsole.log(ctx. + ctx.href)/ 目標地址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. 獲取用戶回調(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. 用戶信息開課吧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緩存問題開課吧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庫：是開發(fā)者在網(wǎng)頁上通過JavaScript代碼使用 main&id=mp1421141115(獲取JSCong)原生功能的工具包，開發(fā)者

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