目次
序文
1. WeChat ミニ プログラムとは何ですか?
2. ビジネスプロセス
1. WeChat アプレットの wx.login() メソッドを使用してログインします。
2. バックエンドは、session_key と openid の代わりにログイン資格情報を使用します。
3. フロントエンド処理 session_key、openid、およびトークン
エピローグ
序文
WeChat ミニ プログラムの大規模な展開と宣伝により、WeChat ミニ プログラムの影が生活のいたるところで見られるようになりました。私たちの周りの誰もが WeChat アプリを使用しており、巨大なユーザー ベースを持っています。WeChat アプレットは、WeChat に基づいて開発された「インスタント APP」です。ダウンロードしてインストールする必要はなく、WeChat 内で直接クリックするだけで使用できます。アプレット誕生時の「use and go」の定義に完全に準拠しているため、短期間で急速に発展しました。では、アプレットのログイン機能はどのように実現されているのか、以下に詳しく紹介します。
1. WeChat ミニ プログラムとは何ですか?
小さなプログラムとは、ダウンロードやインストールをせずに使用できるアプリケーションで、「すぐに使える」アプリケーションの夢を実現します。ユーザーはスキャンまたは検索することでアプリケーションを開くことができます。
2. ビジネスプロセス
ミニ プログラムは、WeChat が提供するログイン機能を通じて、WeChat が提供するユーザー ID を簡単に取得し、ミニ プログラム内でユーザー システムを迅速に確立できます。ログイン プロセスのシーケンスを次の図に示します。
ログイン処理のタイミング:
以下に、ログイン シーケンス図の詳細な説明を示します。
1. WeChat アプレット ログインの wx.login() メソッドを使用します。
WeChat アプレット ページまたは画像がロードされた後、onload()メソッドの wx.login() メソッドを呼び出してユーザー コードを取得します。
コードは次のとおりです（例）。
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://example.com/onLogin',
//上述url地址为后端提供的微信地址，用于前端将code传入后端时所用。
data: {
code: res.code
//res.code为通过wx.login拿到的code，code字段由后端定义，具体要求由后端规定
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})2. バックエンドは、session_key と openid の代わりにログイン資格情報を使用します。
バックエンドの学生がコードを取得したら、そのコードと AppID+AppSecret を WeChat インターフェイス サービスに接続し、その代わりに session_key と openid、およびバックエンドによって生成されたトークンを取得し、コード データを通じてフロントエンドに送り返します。インタラクションインターフェイス。AppIDとAppSecretはWeChatミニプログラムのIDカードに相当し、取得方法はWeChatミニプログラムの管理システムにログイン→開発管理→開発設定となります。写真が示すように:
3. フロントエンド処理 session_key、openid、およびトークン
フロントエンドは session_key、openid、および token を取得した後、session_key、openid、および token をキャッシュに保存し、そのトークンを使用して WeChat アプレットの後続のインターフェイスを要求します。WeChatキャッシュへの保存方法は以下のとおりです。
this.$storageSync.set("codegetOpen", res.data.codegetOpen)
this.$storageSync.set("codegetSess", res.data.codegetSess)
this.$storageSync.set("userToken", res.data.token)
//该代码段写在登录接口成功的回调函数里，res.data为后端返回的数据，具体根据返回时的数据结构不同取值インターフェイスがトークンの送信をどのように要求するかは、WeChat アプレットによってカプセル化されたネットワーク要求によって異なります。これはカプセル化されていないネイティブ ネットワーク リクエスト メソッドです。コードは次のとおりです。
wx.request({
url: 'example.php', //仅为示例，并非真实的接口地址
data: {
},
header: {
'content-type': 'application/json' // 默认值
Authorization:this.$storageSync.get("userToken"),//从缓存中拿到token并携带请求！
},
success (res) {
console.log(res.data)
}
})エピローグ：
さて、今回の WeChat アプレットのログイン処理はここまでです。ところで、私は CSDN コミュニティの大家族に参加できることをとても嬉しく思います。私は大学のコンピューター科学技術学部の学生です。現在働いています。上場インターネット企業に勤めています。インターンシップでは、私の主な開発方向はフロントエンドの方向です。私は若手の小規模フロントエンドです。将来的には、CSDN に関する多くの技術的な作業や、CSDN で発生したいくつかの問題を共有する予定です。開発プロセスとソリューション。ご質問がございましたら、私にプライベートメッセージを送ってください。見かけたら必ず返信します。