Comment mettre en œuvre l'inscription et la connexion en un clic avec le code de vérification du numéro de téléphone mobile en front-end et back-end Java et JavaScript

1. Processus d'inscription et de connexion en un clic

2. Front-end

2.1. Processus d'acquisition du code de vérification

1. Cliquez sur ->Obtenir le code de vérification pour appeler le backend pour obtenir l'interface API du code de vérification

.

2. Code de vérification 59 Compte à rebours en secondes

3. Cliquez à plusieurs reprises pour obtenir le code de vérification et jugez si le compte à rebours du code de vérification est supérieur à 0 :

• S'il est supérieur à 0, le bouton pour obtenir le le code de vérification ne peut pas être touché

• S'il est égal à 0, obtenez le code de vérification et appelez le backend pour obtenir l'interface API du code de vérification

2.2. Code d'acquisition du code de vérification

	var serverUrl = app.globalData.serverUrl;
				// 调用后端发送验证码
				uni.request({
					method: "POST",
					url: serverUrl + "/passport/getSMSCode?mobile=" + mobile,
					success(result) {
						var status = result.data.status;
						if (status != 200) {
							uni.showToast({
								title: result.data.msg,
								icon: "none"
							});
						}
						// 开始倒数60秒限制
						if(me.codeTimes == 0) {
							me.doTimer(59);
						}
					}
				});	
			},
			// 发送验证码的倒计时方法
			doTimer(times) {
				var me = this;
				// 倒计时定时器
				var sendCodeBtnFunction = function(){
					var left = times--;
					if (left <= 0) {
						me.codeTouched = false;
						me.codeBtnText = "发送验证码";
						clearInterval(smsTimer);
					} else {
						me.codeBtnText = left + "s";
					}
					me.codeTimes = left;
				};
				var smsTimer = setInterval(sendCodeBtnFunction, 1000);
			},

3. Code de vérification du backend

.

3.1. Pré-traitement

Afin d'éviter les opérations invalides causées par l'acquisition fréquente du code de vérification, la logique d'acquisition du code de vérification est requise.

Restriction en fonction de l'adresse IP de l'utilisateur, limitant les utilisateurs à obtenir un seul code de vérification dans les 60 secondes

Entrez en premier -> Traitement avant l'interception du code de vérification :

1 Obtenez l'adresse IP de l'utilisateur

2. préfixe + obtenez l'adresse IP de l'utilisateur comme clé dans Redis et obtenez l'adresse IP de la demande stockée auprès de Redis

• S'il y a une adresse IP de demande d'utilisateur non expirée dans Redis, le message "Le SMS a été envoyé trop rapidement ~ Veuillez réessayer plus tard ! "

• Si l'adresse IP de la demande de l'utilisateur n'existe pas dans Redis, elle sera autorisée et continuera à appeler l'interface d'obtention du code de vérification api

3.2. Ajout d'un intercepteur

3.3. Obtenez le code de vérification

1. Vérifiez les données renseignées dans la zone de saisie. Si c'est illégal, il vous sera demandé. Si c'est légal, continuez.

2. Obtenez l'adresse IP demandée par l'utilisateur

3. Restreignez en fonction de l'adresse IP de l'utilisateur, en limitant l'utilisateur à obtenir un seul code de vérification dans les 60 secondes

4. Générez un code de vérification aléatoire à 6 chiffres

5. /Service SMS Alibaba, envoyez le code de vérification

6. Mettez le code de vérification dans Redis pour une vérification ultérieure

7. Renvoyez le code de vérification

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!