Shulou(Shulou.com)06/02 Report--

This article mainly shows you "uniapp how to achieve nail code login", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "uniapp how to achieve nail code login" this article.

1. Use H5 to adjust the nail scan code to log in.

For code-scanning login on the web page, please refer to the nail documentation: log in to a third-party website-Nail Open platform (dingtalk.com)

/ / Log in to dingLoginFn () {let dingData = {appid: OUT_LINK_CONFIG.dingAppid, state: "STATE", url: encodeURIComponent ('callback address after login: it can be a page address of your H5 (href)') / / this address is the route redirection confirmed by the pin scan code (with the code value obtained by the scan code)} Let oauth = `https://oapi.dingtalk.com/connect/oauth3/sns_authorize?appid=${dingData.appid}&response_type=code&scope=snsapi_login&state=${dingData.state}&redirect_uri=${dingData.url}`; let goto = encodeURIComponent (oauth) DDLogin ({id: "loginContainer", / / requires you to define a HTML tag on your own page and set id, for example, or goto: goto, style: "border:none;background-color:#FFFFFF;", width: "268"}); let handleMessage = (event) = > {/ / to determine whether it comes from a ddLogin code scan event. If (event.origin = = "https://login.dingtalk.com" & & event.data) {console.log (" loginTmpCode ", event.data); _ window.location.href = `${oauth} & loginTmpCode=$ {event.data}`; / / after you get the loginTmpCode, you can construct a jump link here to jump}}. If (typeof window.addEventListener! = "undefined") {window.addEventListener ("message", handleMessage, false);} else if (typeof window.attachEvent! = "undefined") {window.attachEvent ("onmessage", handleMessage);}} 2. The address used for route redirection is preferably not the web address where the pin QR code is called (the address of step 1)

Because in uniapp, if the two addresses are the same, it will cause the process of returning code to login to show the QR code page again before jumping to the login success screen. Route redirection page (this article is built with Vue). If you want to use uni's API in H5, you need to introduce uni's jdk into public/index.html.

We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.

Redirect the page:

Export default {name: "LoginCallback", mounted () {/ / after the mounted life cycle listens for the parameters carried after the pin redirection and returns uniapp document.addEventListener ("plusready", () = > {this.$nextTick () = > {/ / after triggering the `UniAppJSBridgeReady` event, you can call uni's API. Document.addEventListener ("UniAppJSBridgeReady", () = > {/ / this.$toast ("location.search:::", JSON.stringify (location.search)); if (location.search.includes ("? code")) {console.log ("getCode:::") is not required if the page is not called immediately after opening the page. Let code = location.search.split ("?") [1] .split ("&") [0] .split ("=") [1] / / after obtaining the code, jump back to the uniapp page via uni API and carry the parameters (obtained in uniapp in onLoad) can also be passed through the uni.postMessage ({data: [code]}) provided by uniapp (note: the data obtained through postMessage is an array in uniap) uni.webView.navigateTo ({url: `/ pages/login/) Login_webview?code=$ [code] `}) }});});}) 3. Webview can be used in uniapp to host web pages with nail scanning codes. And receive the code parameter import {dingLogin} from'@ / api/login' import {setToken} from "@ / utils/auth" export default {name: "LoginWebview" obtained after receiving the nail scan code. Data () {return {url: 'http://xxxxxxx/dd_login' / / the url here is the web page address of the nail code written in step 1}} OnLoad (options) {/ / here is the parameter code returned after scanning the code. It is used to login to if (options.code) {this.login (options.code)}}. Methods: {async login (code) {uni.showLoading () try {const res = await dingLogin (code) if (res.data.code = 200) {setToken (res.data.token) uni.reLaunch ( {url:'/ pages/home/index'})} uni.hideLoading ()} catch (e) {console.log ('login failed' E) uni.hideLoading ()}}

All right, it's done!

If you need to return to uniapp to switch login mode from the page of the pin scan code, you can jump back to uniapp through the API of uni.

Uni.webView.navigateTo ({url: "/ pages/login/index"}); the above is all the content of the article "how to achieve nailing code login by uniapp". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.