ホームページ >WeChat アプレット >ミニプログラム開発 >ミニ プログラム開発 -- ユーザー ログインとメンテナンスのサンプル チュートリアル
ユーザー ログインの提供とユーザーのログイン ステータスの維持は、通常、ユーザー システムを備えたソフトウェア アプリケーションが行う必要があることです。 WeChatのようなソーシャルプラットフォームの場合、小規模なプログラムアプリケーションを作る場合、ユーザー情報の連携を完全に切り離して放棄した純粋なツールソフトウェアを作ることは稀かもしれません。
ユーザーにログインを許可し、ユーザーを識別してユーザー情報を取得し、ユーザーを中心としたサービスを提供することは、ほとんどの小規模なプログラムが行うことです。今日は、ミニプログラムでユーザーをログインする方法と、ログイン後にセッション (セッション) ステータスを維持する方法を学びます。
WeChat ミニ プログラムでは、通常、次の 3 種類のログイン方法を使用します:
自身のアカウント登録とログイン
他のサードパーティ プラットフォーム アカウントを使用してログイン
WeChat アカウントを使用ログインするには (つまり、現在ログインしている WeChat アカウントを直接使用して、ミニ プログラムのユーザーとしてログインします)
1 番目と 2 番目の方法は、現在 Web アプリケーションで最も一般的な 2 つの方法であり、次の方法でも可能です。ただし、<a href="http://www.php.cn/wiki/422.html" target="_blank">Cookie<strong> メカニズムに含まれているため、これら 2 つの方法を使用する前に、自分またはサードパーティの <a href="http://www.php.cn/js/js-weixinapp-api.html"> API</a></strong> は <code>Cookie
に依存する必要がありますか? また、ログインにページ リダイレクトを使用する必要があるサードパーティ API は、ミニ プログラムではサポートされていません。は使用できません。 <a href="http://www.php.cn/wiki/422.html" target="_blank">Cookie</a>
的机制,所以在使用这2种方式前,请确认你们或第三方的API是否需要依赖Cookie
;还有小程序中也不支持HTML页面,那些需要使用页面重定向来进行登录的第三方API就需要改造,或不能用了。
我们今天主要来讨论一下第三种方式,即如何使用微信账号进行登录,因为这种方式和微信平台结合最紧密,用户体验比较好。
引用小程序官方文档的登录流程图,整个登录流程基本如下图所示:
该图中,“小程序”指的就是我们使用小程序框架写的代码部分,“第三方服务器”一般就是我们自己的后台服务程序,“微信服务器”是微信官方的API服务器。
下面我们来逐步分解一下这个流程图。
登录凭证(code)
在小程序中登录的第一步,就是先获取登录凭证。我们可以使用wx.login()方法并得到一个登录凭证。
我们可以在小程序的App代码中发起登录凭证请求,也可以在其他任何Page页面代码中发起登录凭证请求,主要根据你小程序的实际需要。
App({ onLaunch: function() { wx.login({ success: function(res) { var code = res.code; if (code) { console.log('获取用户登录凭证:' + code); } else { console.log('获取用户登录态失败:' + res.errMsg); } } }); } })
唯一标识(openid)
和会话密钥(session_key)
首先,我们使用wx.request()方法,请求我们自己实现的一个后台API,并将登录凭证(code)携带过去,例如在我们前面代码的基础上增加:
App({ onLaunch: function() { wx.login({ success: function(res) { var code = res.code; if (code) { console.log('获取用户登录凭证:' + code); // --------- 发送凭证 ------------------ wx.request({ url: 'https://www.my-domain.com/wx/onlogin', data: { code: code } }) // ------------------------------------ } else { console.log('获取用户登录态失败:' + res.errMsg); } } }); } })
你的后台服务(/wx/onlogin)接着需要使用这个传递过来的登录凭证,去调用微信接口换取openid和session_key,接口地址格式如下所示:
api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
这里是我使用了Node.js Express构建的后台服务的代码,仅供参考:
router.get('/wx/onlogin', function (req, res, next) { let code = req.query.code request.get({ uri: 'https://api.weixin.qq.com/sns/jscode2session', json: true, qs: { grant_type: 'authorization_code', appid: '你小程序的APPID', secret: '你小程序的SECRET', js_code: code } }, (err, response, data) => { if (response.statusCode === 200) { console.log("[openid]", data.openid) console.log("[session_key]", data.session_key) //TODO: 生成一个唯一字符串sessionid作为键,将openid和session_key作为值,存入redis,超时时间设置为2小时 //伪代码: redisStore.set(sessionid, openid + session_key, 7200) res.json({ sessionid: sessionid }) } else { console.log("[error]", err) res.json(err) } }) })
这段后台代码成功执行的话,就可以得到openid和session_key。这个信息就是当前微信账户在微信服务器那边的登录态了。
但是,为了安全方面的原因,请不要直接使用这些信息作为你小程序的用户标识和session标识回传到小程序客户端中去,我们应该在服务器端做一层自己的session,将这个微信账号登录态生成一个session id并维护在我们自己的session机制中,然后把这个session id派发到小程序客户端作为session标识来使用。
关于如何在服务器端做这个session机制,我们现在一般采用键值对存储工具来做,比如redis。我们为每个session生成一个唯一的字符串作为键,然后可以将session_key和openid作为值,存入redis中,为了安全,存入的时候还应设置一个超时的时间。
sessionid
🎜
ログイン認証情報 (コード)
を取得します 🎜🎜 ミニ プログラムにログインするための最初のステップは、ログイン認証情報を取得することです。 wx.login() メソッドを使用して、ログイン認証情報を取得できます。 🎜🎜主にミニ プログラムの実際のニーズに基づいて、ミニ プログラムのアプリ コードまたは他のページ コードでログイン認証情報のリクエストを開始できます。 🎜router.get('/wx/products/list', function (req, res, next) { let sessionid = req.header("sessionid") let sessionVal = redisStore.get(sessionid) if (sessionVal) { // 执行其他业务代码 } else { // 执行错误处理 } })
一意識別子 (openid)
および セッション キーを交換します。 (session_key)
🎜🎜まず、wx.request() メソッドを使用して、自分たちで実装したバックエンド API をリクエストし、ログイン認証情報 (コード) を伝えます。たとえば、以前のコードに基づいて追加します: 🎜rrreee🎜バックグラウンド サービス (/wx/onlogin) は、渡されたログイン認証情報を使用して、openid と session_key と引き換えに WeChat インターフェイスを呼び出す必要があります。インターフェイス アドレスの形式は次のとおりです。 🎜rrreee🎜私が使用したものは次のとおりです。Node.js🎜 Express によって構築されたバックグラウンド サービスのコード (参考のみ): 🎜rrreee🎜このバックグラウンド コード 正常に実行されると、 openid と session_key を取得できます。この情報は、WeChat サーバー上の現在の WeChat アカウントのログイン ステータスです。 🎜🎜 ただし、セキュリティ上の理由から、この情報をミニ プログラム クライアントに送信するミニ プログラムのユーザー ID とセッション ID として直接使用しないでください。サーバー側で独自のセッションを作成し、これを使用する必要があります。 WeChat アカウントのログイン状態によりセッション ID が生成され、それが独自のセッション メカニズムで維持され、このセッション ID がセッション ID として使用するためにミニ プログラム クライアントに配布されます。 🎜🎜 このセッションメカニズムをサーバー側で実装する方法については、現在では Redis などのキーと値のストレージ ツールを使用するのが一般的です。各セッションのキーとして一意の文字列を生成し、session_key と openid を値として Redis に保存します。安全のため、保存時にタイムアウトを設定する必要があります。 🎜sessionid
を保存します🎜🎜 Web アプリケーションを開発する場合、クライアント (ブラウザ) では通常、セッション ID を Cookie に保存しますが、アプレットは Cookie メカニズムを使用しません。したがって、Cookie は使用できませんが、ミニ プログラムにはローカル ストレージがあるため、ストレージを使用して後続のバックグラウンド API 呼び出しのためにセッション ID を保存できます。 🎜在之后,调用那些需要登录后才有权限的访问的后台服务时,你可以将保存在storage中的sessionid取出并携带在请求中(可以放在header中携带,也可以放在querystring中,或是放在body中,根据你自己的需要来使用),传递到后台服务,后台代码中获取到该sessionid后,从redis中查找是否有该sessionid存在,存在的话,即确认该session是有效的,继续后续的代码执行,否则进行错误处理。
这是一个需要session验证的后台服务示例,我的sessionid是放在header中传递的,所以在这个示例中,是从请求的header中获取sessionid:
router.get('/wx/products/list', function (req, res, next) { let sessionid = req.header("sessionid") let sessionVal = redisStore.get(sessionid) if (sessionVal) { // 执行其他业务代码 } else { // 执行错误处理 } })
好了,通过微信账号进行小程序登录和状态维护的简单流程就是这样,了解这些知识点之后,再基于此进行后续的开发就会变得更容易了。
另外,腾讯前端团队也开源了他们封装的相关库,可以借鉴和使用。
服务器端库 weapp-session
小程序端库 weapp-session-client
感谢阅读我的文章,如有疑问或写错的地方请不吝留言赐教。
【相关推荐】
1. 微信小程序完整源码下载
以上がミニ プログラム開発 -- ユーザー ログインとメンテナンスのサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。