Implémenter l'authentification de sécurité PHP à l'aide de l'authentification téléphonique Firebase

Utilisez l'authentification téléphonique Firebase pour implémenter la vérification de sécurité PHP

Présentation :
Lors du développement d'applications Web, la vérification de sécurité est un lien très important. Pour garantir l'identité des utilisateurs et la sécurité des données, nous devons authentifier les utilisateurs lorsqu'ils se connectent ou effectuent des opérations sensibles. Firebase Phone Authentication est une solution d'authentification puissante qui peut nous aider à mettre en œuvre la vérification du numéro de téléphone mobile. Cet article explique comment utiliser l'authentification téléphonique Firebase et PHP pour mettre en œuvre la vérification de sécurité.

Étape 1 : Préparation

1. Enregistrez un compte Firebase et créez un nouveau projet Firebase.
2. Dans la console Firebase, activez la fonctionnalité "Authentification téléphonique".

3. Créez une page Web et présentez le SDK JavaScript de Firebase.

   <script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-auth.js"></script>

Étape 2 : Intégrer l'authentification téléphonique Firebase

1. Créez un fichier PHP pour gérer les opérations liées à l'authentification téléphonique Firebase, telles que l'envoi de codes de vérification à Firebase, la vérification des codes de vérification, etc. Nous utiliserons l'API REST fournie par Firebase pour la communication.

   <?php
    $phone_number = $_POST['phone_number'];
    $recaptcha_token = $_POST['recaptcha_token'];
   
    $request_body = [
        'phoneNumber' => $phone_number,
        'recaptchaToken' => $recaptcha_token
    ];
   
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://identitytoolkit.googleapis.com/v1/accounts:sendOobCode?key=[YOUR_API_KEY]');
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($request_body));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
   
    $response = curl_exec($ch);
    curl_close($ch);
   
    echo $response;
   ?>

   Remarque : [YOUR_API_KEY] dans le code ci-dessus doit être remplacé par la clé API que vous avez générée dans la console Firebase. [YOUR_API_KEY]需要替换成你在Firebase控制台中生成的API密钥。

步骤三：前端代码编写

1. 在网页上创建一个文本框和按钮，用于输入手机号码并触发发送验证码的操作。

   <input type="text" id="phone_number_input">
   <button onclick="sendVerificationCode()">发送验证码</button>

2. 创建一个JavaScript函数来处理点击按钮的事件，并发送手机号码到服务器。

   function sendVerificationCode() {
    var phoneNumber = document.getElementById('phone_number_input').value;
    var recaptchaToken = 'YOUR_RECAPTCHA_TOKEN';
   
    var request = new XMLHttpRequest();
    request.open('POST', 'path/to/your/php/file.php');
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   
    request.onreadystatechange = function() {
        if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var response = JSON.parse(request.responseText);
            if (response.hasOwnProperty('error')) {
                console.log('发送验证码失败：' + response.error.message);
            } else {
                console.log('验证码已发送，请查收。');
            }
        }
    }
   
    var requestBody = 'phone_number=' + encodeURIComponent(phoneNumber) + '&recaptcha_token=' + encodeURIComponent(recaptchaToken);
    request.send(requestBody);
   }

   注意：上述代码中的YOUR_RECAPTCHA_TOKEN

Étape 3 : écriture du code frontal

1. Créez une zone de texte et un bouton sur la page Web pour saisir le numéro de téléphone mobile et déclencher l'action d'envoi du code de vérification.

   <input type="text" id="verification_code_input">
   <button onclick="verifyVerificationCode()">验证验证码</button>

2. Créez une fonction JavaScript pour gérer l'événement de clic sur le bouton et envoyer le numéro de téléphone mobile au serveur.

   function verifyVerificationCode() {
    var verificationCode = document.getElementById('verification_code_input').value;
   
    var credential = firebase.auth.PhoneAuthProvider.credential(window.confirmationResult.verificationId, verificationCode);
    firebase.auth().signInWithCredential(credential)
        .then(function() {
            console.log('验证成功！'); // 验证成功后的操作
        })
        .catch(function(error) {
            console.log('验证失败：' + error.message);
        });
   }

   Remarque : YOUR_RECAPTCHA_TOKEN dans le code ci-dessus doit être remplacé par votre clé de site reCAPTCHA pour empêcher les opérations malveillantes.

Étape 4 : Vérifiez le code de vérification

🎜Créez une autre zone de texte et un autre bouton sur la page Web pour saisir le code de vérification et déclencher l'action de vérification du code de vérification. 🎜rrreee🎜🎜🎜 Créez une fonction JavaScript pour gérer l'événement de clic sur le bouton et envoyez le code de vérification à Firebase pour vérification. 🎜rrreee🎜🎜🎜À ce stade, nous avons terminé toutes les étapes pour mettre en œuvre la vérification de sécurité PHP à l'aide de l'authentification téléphonique Firebase. Désormais, lorsque l'utilisateur clique sur le bouton « Envoyer le code de vérification », le code de vérification sera envoyé au téléphone de l'utilisateur. Une fois que l'utilisateur a saisi le code de vérification, cliquez sur le bouton « Vérifier le code de vérification » pour vérifier. 🎜🎜Résumé : 🎜Firebase Phone Authentication fournit un moyen simple et puissant de mettre en œuvre l'authentification de sécurité PHP. En combinant PHP et l'API REST de Firebase, nous pouvons facilement mettre en œuvre l'authentification des utilisateurs et sécuriser les données des utilisateurs dans notre application. J'espère que cet article vous aidera ! 🎜

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!