Here it goes to integrate Firebase Phone Number authentication via SMS using some codes and REST APIs.
Before proceeds please enable phone authentication in Firebase console. More information please read the following:-
[1] Authenticate with Firebase with a Phone Number Using JavaScript
[2] Verifying Phone Numbers with Firebase Phone Authentication on Your Backend for FREE* | by Lim Shang Yi | Google Developers Experts | Medium
The 3-steps are:-
[1] Obtain RecaptchaToken
[2] Obtain Session Code
[3] Verified SMS 6-digit code
[1] Get Recaptcha Token
You need to generate a Recaptcha Token. To do that you need a Recaptcha SiteKey.
To get the Recaptcha Sitekey use the following REST API:-
GET https://identitytoolkit.googleapis.com/v1/recaptchaParams?key=[YOUR_API_KEY]
Read more at Method: getRecaptchaParams | Identity Platform Documentation
The copy the following code into HTML element:-
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha"
data-sitekey="Put the Recaptcha SiteKey obtain from [1] here using Insert Dynamic Data"
data-callback="recaptchaToken"
data-size="invisible"> // I am using invisible Recaptcha here
</div>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction); // myBtn puts in ID attribute of a Button Element
function myFunction() {
grecaptcha.execute();
}
var recaptchaToken = function(response) {
console.log(response);
// I am using Backend WF to get the Recaptcha Token and the mobile number and save to DB. You can use other method such as Javascript to Bubble element from Toolbox plugin.
fetch('**Put Your REST API here**', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
token: response,
mobileno : document.getElementById('mobileNo').value // mobileNo puts in ID attribute of an Input Element
}),
})
if (recaptchaToken == "" || recaptchaToken == undefined || recaptchaToken.length == 0)
{
console.log("You can't leave Captcha Code empty");
return false;
}
grecaptcha.reset();
console.log("Captcha completed");
return true;
};
</script>
[2] Obtain Session Code
Next is to obtain the Session Code using the following REST API:-
POST https://identitytoolkit.googleapis.com/v1/accounts:sendVerificationCode?key=[YOUR_API_KEY]
Your will need 2 parameters
- phoneNumber
- recaptchaToken
Read more at Method: accounts.sendVerificationCode
I saved the response i.e. the Session Code in the DB corresponding to phone number and Recaptcha Code.
A 6-digit SMS code will be sent to the mobile number.
[3] Verified SMS 6-digit code
Next to verifiy the 6-digit code received via SMS use the following REST API:-
POST https://identitytoolkit.googleapis.com/v1/accounts:signInWithPhoneNumber?key=[YOUR_API_KEY]
Your will need 2 parameters
- sessionInfo
- code
Read more at Method: accounts.signInWithPhoneNumber
This is what I had achieved so far. Is this it? Don’t know. But I found out you can use Firebase Phone Authentication or even Google Cloud Platform IAM Phone Authentication. The free tier the same and pricing after free tier also the same but Google Cloud Platform IAM Phone Authentication seem like to have free 50K MAU - no sure of the impact and it seems the SMS response can be edited (haven’t try) compare to fixed response for Firebase.