Hướng dẫn xác thực tài khoản login bằng SMS, miễn phí sử dụng Firebase

#verify-sms-firebase #javascript #lab-javascript #verify-sms-firebase #firebase

Nội dung bài viết

Video học lập trình mỗi ngày

Verify sms firebase. Cho đến này nay việc login một tài khoản user không hề khó khăn, nhưng việc xác thực và bảo mật của những tài khoản đó vô cùng quan trọng, nếu như các bạn chỉ làm cho các nhận thì thiết nghĩ sẽ không có đủ tiền để trang trải chi phí về việc đó, nhưng kể từ khi verify sms firebase cung cấp miễn phí thì câu chuyện thì rất đơn giản. Trong bài viết này

Trong bài viết này chúng tôi sẽ giới thiệu cho các bạn cách xác thực qua SMS thông qua firebase một cách miễn phí. 

Rồi sẽ đến lúc bạn cần người dùng ứng dụng xác thực số điện thoại của họ khi thực hiện một số tác vụ nhất định trên ứng dụng của bạn. Giải pháp phổ biến nhất là đăng ký nhà cung cấp dịch vụ SMS và xây dựng hệ thống xác minh SMS của riêng bạn. Có quá nhiều thứ cần phải được thực hiện chỉ vì xác minh số điện thoại! Ngoài ra, bạn có thể sử dụng dịch vụ Xác thực điện thoại Firebase, cho phép bạn đăng nhập vào ứng dụng của mình bằng cách gửi mã xác minh đến điện thoại của bạn qua SMS, MIỄN PHÍ * 

Firebase là gì?


Còn những bạn nào chưa biết cách tạo tài khoàn firebase thì xin mời ghé qua bài viết này. Thông qua bài viết trước kia "Hướng Dẫn Login Bằng Tài Khoản Google, FaceBook Sử Dụng Firebase Trên Website." Ở đó sẽ giúp các bạn cấu hình về cách xác thực.


Link Demo: TEST DEMO

your firebase app verification code is là gì

Đầu tiên bạn phải hiểu về verification code là gì? Việc xác thực code trong firebase bạn phải hiểu chính xác hơn. Đó chính là khi một user login thành công trên ứng dụng của bạn dựa vào cơ chế của hệ thống bạn hay là sử dụng một bên thứ 3. Thì khi thành công thì khi bạn sử dụng dịch vụ firebase, lúc đó firebase sẽ gửi về một code thông qua SMS, Email, tuỳ thuộc vào cơ chế của bạn. Lúc đó, user sẽ sủ dụng code đó để verification, sau khi login thành công. Nhắc lại verify code không phải là để login, và đó là xác thực đó phải là bạn hay không? Hay là người khác đang login tài khoản của bạn.


firebase sms verification code

Đầy là một đoạn code đầy đủ về "firebase sms verification code" cho các bạn và có link demo dưới bài viết. Tất nhiên để làm được điều này bạn phải cần hiểu nhiều về Firebase. Bạn có thể tìm hiểu mọi thứ về Firebase trong bài viết: "firebase là gì? Tips and tricks firebase."


Để có thể làm rõ hơn chúng tôi chia ra 3 mục cho các bạn có thể copy/paste là test với localhost. 

1 - HTML

<script src="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />

<div id="container">
    <h3>Firebase Phone Number Auth. Demo</h3>
    <div id="loading">Loading...</div>
    <div id="loaded" class="hidden">
        <div id="main">
            <div id="user-signed-in" class="hidden">
                <div id="user-info">
                    <div id="photo-container">
                        <img id="photo">
                    </div>
                    <div id="name"></div>
                    <div id="email"></div>
                    <div id="phone"></div>
                    <div class="clearfix"></div>
                </div>
                <p>
                    <button id="sign-out">Sign Out</button>
                    <button id="delete-account">Delete account</button>
                </p>
            </div>
            <div id="user-signed-out" class="hidden">
                <h4>You are signed out.</h4>
                <div id="firebaseui-spa">
                    <h3>Single Page App mode:</h3>
                    <div id="firebaseui-container"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Ở phần HTML này bạn chú ý add phần firebaseui vào nhé. phần firebaseui rất quan trọng nó giúp bạn tạo code tiện lợi trong việc ui desginer. FirebaseUI hỗ trợ đầy đủ tất cả các trình duyệt gần đây. Đăng nhập với các nhà cung cấp liên kết (Google, Facebook, Twitter, GitHub, Microsoft, Yahoo, OIDC, SAML) cũng được hỗ trợ trong môi trường Cordova / Ionic. Các môi trường không có trình duyệt bổ sung (React Native ...) hoặc các tiện ích mở rộng Chrome sẽ được thêm vào sau khi SDK lõi Firebase bên dưới hỗ trợ chúng theo cách tương thích với FirebaseUI.

2 - Tích hợp firebase, firebaseui

(function() {

    console.log('connect to firebase');

    // Initialize Firebase
    var firebaseConfig = {
        apiKey: "xxxx",
        authDomain: "xxxx",
        databaseURL: "xxxx",
        projectId: "xxx",
        storageBucket: "xxxx",
        messagingSenderId: "xxx",
        appId: "1:xxx:web:xxxxxx"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);



    var uiConfig = {
         'callbacks': {
                // Called when the user has been successfully signed in.
                'signInSuccessWithAuthResult': function(user, credential, redirectUrl) {
                    
                    handleSignedInUser(user);

                    // window.location.assign(`/test`);
                    //window.location.href = redirectUrl;
                    // Do not redirect.
                    return false;
                }
            },
        signInOptions: [
          // Leave the lines as is for the providers you want to offer your users.
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          firebase.auth.TwitterAuthProvider.PROVIDER_ID,
          firebase.auth.GithubAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID,
          firebase.auth.PhoneAuthProvider.PROVIDER_ID,
          firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
        ],
        // tosUrl and privacyPolicyUrl accept either url string or a callback
        // function.
        // Terms of service url/callback.
        tosUrl: 'https://www.google.com',
        // Privacy policy url/callback.
        privacyPolicyUrl: function() {
          window.location.assign('https://www.google.com');
        }
      }




    // Initialize the FirebaseUI Widget using Firebase.
    var ui = new firebaseui.auth.AuthUI(firebase.auth());

    /**
     * Displays the UI for a signed in user.
     * @param {!firebase.User} user
     */
    var handleSignedInUser = function(user) {

        document.getElementById('user-signed-in').style.display = 'block';
        document.getElementById('user-signed-out').style.display = 'none';
        document.getElementById('name').textContent = user.displayName;
        document.getElementById('email').textContent = user.email;
        document.getElementById('phone').textContent = user.phoneNumber;
        if (user.photoURL) {
            document.getElementById('photo').src = user.photoURL;
            document.getElementById('photo').style.display = 'block';
        } else {
            document.getElementById('photo').style.display = 'none';
        }
    };


    /**
     * Displays the UI for a signed out user.
     */
    var handleSignedOutUser = function() {
        document.getElementById('user-signed-in').style.display = 'none';
        document.getElementById('user-signed-out').style.display = 'block';
        ui.start('#firebaseui-container', uiConfig);
    };

    // Listen to change in auth state so it displays the correct UI for when
    // the user is signed in or not.

    firebase.auth().onAuthStateChanged(function(user) {
        console.log('user>>>>', user)
        document.getElementById('loading').style.display = 'none';
        document.getElementById('loaded').style.display = 'block';
        user ? handleSignedInUser(user) : handleSignedOutUser();
    });

    /**
     * Deletes the user's account.
     */
    var deleteAccount = function() {
        firebase.auth().currentUser.delete().catch(function(error) {
            if (error.code == 'auth/requires-recent-login') {
                // The user's credential is too old. She needs to sign in again.
                firebase.auth().signOut().then(function() {
                    // The timeout allows the message to be displayed after the UI has
                    // changed to the signed out state.
                    setTimeout(function() {
                        alert('Please sign in again to delete your account.');
                    }, 1);
                });
            }
        });
    };

    /**
     * Initializes the app.
     */
    var initApp = function() {
        document.getElementById('sign-out').addEventListener('click', function() {
            firebase.auth().signOut();
        });
        document.getElementById('delete-account').addEventListener('click', function() {
                deleteAccount();
        });
    };

    window.addEventListener('load', initApp);

}())

Chúng ta sẽ giải thích từng phần cho các bạn hiểu 

firebaseConfig

var firebaseConfig = {
        apiKey: "xxxx",
        authDomain: "xxxx",
        databaseURL: "xxxx",
        projectId: "xxx",
        storageBucket: "xxxx",
        messagingSenderId: "xxx",
        appId: "1:xxx:web:xxxxxx"
    };
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Những thông số config này các bạn có thể copy từ trong project của firebase. Sau đó khởi tạo chúng để cho website kết nối được với firebase 

uiConfig 

Tiếp theo đến lượt khai báo uiConfig để có thể sử dụng được những code generator. Link xem thêm https://github.com/firebase/firebaseui-web 

Mặc định của code thế này

var uiConfig = {
    signInSuccessUrl: '<url-to-redirect-to-on-success>',
    signInOptions: [
      // Leave the lines as is for the providers you want to offer your users.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      firebase.auth.GithubAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
    ],
    // tosUrl and privacyPolicyUrl accept either url string or a callback
    // function.
    // Terms of service url/callback.
    tosUrl: '<your-tos-url>',
    // Privacy policy url/callback.
    privacyPolicyUrl: function() {
      window.location.assign('<your-privacy-policy-url>');
    }
}

Bạn có thể nhìn vào thuộc tính signInOptions bạn sẽ thấy sẽ có nhiều xác thực cho bạn, nếu bạn muốn nhiều hơn. Các phần còn lại thì đó là việc xử lý dành cho mỗi developer mà thôi.

4 - Verify sms firebase.
Các bạn có thể xem demo tại đây: TEST DEMO

Có thể bạn đã bị missing

DMCA.com Protection Status

© 2024 Anonystick | Made by Anonystick