Bagaimana untuk melaksanakan fungsi log masuk WeChat program mini pada uniapp (ringkasan proses)

Bagaimana untuk melaksanakan fungsi log masuk WeChat program mini pada uniapp? Artikel berikut akan berkongsi dengan anda proses operasi khusus fungsi log masuk WeChat program mini pada uniapp. Saya harap ia akan membantu anda!

Sebelum ini saya telah menulis artikel yang memperkenalkan pembangunan uniapp Fungsi log masuk WeChat, iaitu versi apl Android Hari ini saya akan memperkenalkan cara untuk melaksanakannya Log masuk WeChat pada program mini , artikel itu tidak menyebut antara muka pelayan log masuk WeChat, artikel ini akan menyebut reka bentuk antara muka khusus dan idea reka bentuk struktur jadual. Berbanding dengan aplikasi, adalah lebih mudah untuk melaksanakan log masuk WeChat pada applet WeChat kerana tidak perlu menjana ID aplikasi Walau bagaimanapun, prasyarat adalah untuk mempunyai platform terbuka WeChat Akaun laman web rasmi.

Seterusnya, mari kita bincangkan tentang langkah-langkahnya. Satu perkara yang perlu diambil perhatian ialah setiap program mini didaftarkan dengan alamat e-mel, dan alamat e-mel hanya boleh terikat dengan satu program mini. satu orang memilikinya Bilangan peti mel secara langsung mengehadkan bilangan program mini yang dimiliki oleh seseorang.

1. Daftar untuk platform terbuka

Langkah ini adalah sama dengan fungsi log masuk aplikasi WeChat apl sebelumnya. Proses pendaftaransedikit menyusahkan, kerana ia memerlukan maklumat syarikat saya hanya ingin menyebutnya di sini. Cukuplah mendaftar untuk platform terbuka, yang boleh dikongsi oleh aplikasi, program mini, akaun awam , laman web, dan lain-lain. Saya hanya mahu melakukan ini untuk artikel ini Artikel itu menyebutnya lagi Lagipun, walaupun artikel itu kecil, ia mesti komprehensif.

2. Pensijilan kelayakan pembangun

Ini adalah sama seperti sebelum ini, kerana selepas pensijilan kelayakan pembangun pada platform terbuka, ia akan dibuka kepada anda. WeChat mempunyai keizinan fungsi terbuka untuk pelbagai platform seperti apl, program mini, akaun rasmi dan tapak web, dan berbilang boleh ditambah pada setiap satu Contohnya, 50 program mini boleh ditambah. Mengira dengan cara ini, 300 yuan masih agak berharga.

3. Tambah program mini ke platform terbuka

Cuma isikan maklumat program mini yang berkaitan di sini diperlukan untuk langkah seterusnya. Imbas kod QR Saya tidak begitu memahami maksud imbasan ini, kerana e-mel mempunyai sedikit kaitan dengan WeChat Selepas mengimbas kod QR, program mini berjaya diikat ke platform terbuka.

Klik untuk melihat dan melihat dan mendapati terdapat sangat sedikit kandungan.

Ini berbeza sama sekali daripada mengikat apl ke platform terbuka Malah, ia mudah difahami, kerana ini adalah applet WeChat, dan applet WeChat dipasang pada WeChat Ia berdasarkan kebenaran asas WeChat, jadi ini bermakna anda boleh terus menggunakan hampir semua fungsi WeChat melalui applet WeChat Selagi anda boleh membangunkannya, tunjukkan kodnya.

4. Dapatkan AppSecret

Anda boleh mendapatkan kunci program mini dalam tetapan pengurusan pembangunan dan pembangunan, simpannya sendiri ia dalam teks biasa untuk anda, jika hilang kemudian, anda boleh menetapkan semula penjanaan. Kunci tidak digunakan dalam perniagaan program mini umum, dan hanya digunakan apabila melakukan fungsi terbuka WeChat (log masuk, perkongsian, dll.).

5. Reka bentuk perniagaan log masuk WeChat

Perniagaan log masuk WeChat mempunyai fungsi pendaftaran dan log masuk pada produk Internet umum, tetapi pada produk bukan Internet, umumnya pengguna WeChat Biasa tidak akan dibenarkan mendaftar, hanya pengguna yang berdaftar pada aplikasi ini. Oleh itu, log masuk ini memerlukan pengikatan pengguna biasa dengan akaun WeChat.

Proses perniagaan masih menjadi perniagaan dalam gambar ini dalam fungsi log masuk WeChat:

Maka persoalannya, bagaimana untuk laksanakan log masuk Apa? Tumpuan artikel ini adalah untuk menerangkan dengan jelas kandungan khusus log masuk dalam gambar di atas.

Berikut ialah gambar rajah reka bentuk perniagaan log masuk rasminya, rajah ini agak rumit untuk mereka yang baru bermula. Anda boleh mengikuti analisis saya di bawah. Saya mungkin tahu idea itu.

Berikut ialah analisis perniagaan khusus saya berdasarkan situasi sebenar projek Kandungan khusus dibahagikan kepada dua bahagian: bahagian hadapan dan belakang:

Perniagaan hadapan

Sebagai contoh, jika Xiao Ming log masuk menggunakan WeChat pada telefon bimbitnya, jika dia log masuk buat kali pertama, dia perlu mengikatnya dengan akaun sistem, seperti akaun pentadbir , dia perlu melengkapkan dua langkah: 1. Mengizinkan WeChat dan mendapatkan maklumat akaun WeChat 2. Mengikat akaun WeChat ke akaun sistem

Langkah pertama adalah untuk mendapatkan maklumat akaun WeChat Ringkasan mudah ialah mendapatkan kebenaran pengguna dahulu Kemudian gunakan AppID dan AppSecret pembangun untuk memanggil antara muka log masuk khusus untuk mendapatkan maklumat pengguna, openid dan maklumat lain.

Dalam langkah kedua, selepas mendapat maklumat ini, anda perlu kembali ke antara muka hadapan dan memberikan antara muka log masuk Langkah ini digunakan untuk memasukkan nama pengguna dan kata laluan sistem.

Perniagaan belakang

Langkah kedua ialah langkah yang mesti diambil oleh pengguna baharu apabila mengakses apl ini pengguna sistem Maklumat akaun dan maklumat WeChat pengguna semasa (openid) boleh dihantar ke bahagian belakang pada masa yang sama Selain pengesahan log masuk biasa, antara muka log masuk juga mesti sepadan dengan openid ini berjaya. Akaun sistem dan openid mempunyai perhubungan satu-dengan-banyak, yang mudah difahami Ia adalah akaun pentadbir, yang membenarkan berbilang pengguna WeChat untuk log masuk. Sudah tentu, jika pengguna WeChat semasa log masuk untuk kali pertama, sekeping maklumat yang mengikat antara pengguna WeChat semasa dan akaun sistem mesti dimasukkan semasa log masuk.

Untuk perniagaan bahagian hadapan, bahagian log masuk WeChat sebenarnya boleh dirangkumkan dan dipanggil sebagai pemprosesan pasca perkhidmatan Oleh kerana maklumat AppID dan AppSecret agak sensitif, adalah lebih baik untuk menyimpannya di bahagian belakang .

Log masuk pelaksanaan perniagaan

1 kebenaran log masuk dan dapatkan kod kelayakan log masuk sementara

di bawah. Kod disiarkan dan saya akan menganalisis idea secara terperinci. Untuk log masuk dengan WeChat, halaman kebenaran akan muncul Kod lapisan paparan mempunyai format khas Anda perlu menulis " kaedah acara butang dicetuskan, dan kemudian dipanggil selepas kebenaran Untuk API uni.login, langkah ini adalah untuk mendapatkan kod tersebut bersamaan dengan kelayakan, yang bersifat sementara dan akan berbeza setiap kali ia dipanggil. Bahagian hadapan mendapat sijil ini dan memanggil antara muka pelayan 'wxlogin' di bahagian belakang

<button id="btnwx" class="login-wxpng" open-type="getUserInfo" @getuserinfo="xcxWxLogin"></button>

...

xcxWxLogin() {
				var self = this;
				uni.login({
					provider: &#39;weixin&#39;,
					success: function(res) {
						if (res.code) {
							//发起网络请求
							uni.request({
								method: &#39;POST&#39;,
								url: &#39;http://************/wxlogin&#39;,
								data: {
									code: res.code
								},
								success(res) {
									//将openid存入本地缓存
									uni.setStorage({
										key: &#39;openid_key&#39;,
										data: res.data.openid
									});
									if (res.statusCode == 200 && res.data && res.data.username) {
										self.isFirstWXLogin = false;
										self.name = res.data.username;
										self.password = res.data.password;
										setTimeout(function() {
											self.tologin({
												username: res.data.username,
												password: res.data.password,
												encrypted: true
											})
										}, 0)
									} else {
										//首次登录，可以跳转到一个绑定账号的页面
										uni.navigateTo({
											url: &#39;wxlogin&#39;
										});
								}
							})
						} else {
							console.log(&#39;登录失败！&#39; + res.errMsg)
						}
					},
					fail(e) {
						console.log(e);
					},
					complete(e) {
						console.log(e);
					}
				});
			}

2. Log masuk dengan WeChat dan dapatkan pengecam unik pengguna

Langkah ini diletakkan Di sebelah pelayan, saya menggunakan antara muka yang ditulis oleh nod untuk rujukan anda:

router.post("/wxlogin", (req, res, next) => {
    //将请求地址的url后面的参数拼接起来
    var data = {
        'appid': config.appId,
        'secret': config.appSecret,
        'js_code': req.body.code,
        'grant_type': 'authorization_code'
    };
    console.log(data);
    // querystring的stringify用于拼接查询
    var content = querystring.stringify(data);
    // 根据微信开发者文档给的API
    var url = 'https://api.weixin.qq.com/sns/jscode2session?' + content;
    // 对url发出一个get请求
    request({
        'url': url
    }, (error, response, body) => {
        // 将body的内容解析出来
        let abody = JSON.parse(body);
        // body里面包括openid和session_key
        console.log(abody)

        //根据openid查找用户，如果查到则返回用户名密码登录，否则直接提示登录
        getAllUsers(abody, res)
    })
})

Kod di atas adalah untuk rujukan sahaja. Idea ini adalah untuk menggunakan appId dan appSecret (ini dua dikonfigurasikan dalam bahagian belakang, atau wujud dalam pangkalan data) Dan parameter kod yang diluluskan dari hujung hadapan, panggil antara muka 'api.weixin.qq.com/sns/jscode2...

3. Bahagian hadapan menyimpan maklumat pengguna ke dalam cache setempat

Langkah ini boleh dipanggil selepas kebenaran ini untuk menyimpan avatar, nama panggilan WeChat, dsb. Jika anda tidak biasa dengan API berkaitan uni, anda boleh membaca dokumentasi api dahulu.

uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						uni.setStorageSync('auth_service', infoRes.userInfo)
					}
				});

Baiklah, langkah asas log masuk program mini sudah selesai.

Disyorkan: "tutorial uniapp"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi log masuk WeChat program mini pada uniapp (ringkasan proses). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!