Angular 7 & Firebase Login with Phone Number (use invisible reCAPTCHA)

Merhaba,

Angular 7 Firebase Entegrasyonu yazımda bu konuya devam niteliğinde bir kaç yazı daha yazacağımdan bahsetmiştim.

Şimdi ise Firebase kullanarak Telefon numarası ile oturum açma işlemini nasıl yaparız onu anlatmaya çalışacağım.

— Bu yazı bir devam yazısı olduğu için Firebase Entegrasyonu yapılmış kabul ederek Auth işlemine başlayacağım.

1. Adım

Firebase > Authentication > Oturum açma yöntemleri sekmesinden Telefon yöntemini etkinleştiriyoruz.

2. Adım

loginPhone isminde bir component ve window isminde bir servis oluşturuyorum.

3. Adım

window.service.ts dosyamızı hazırlıyoruz.

// window.service.ts
import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root'
})
export class WindowService {
   constructor() { }
   
   get windowRef(){
      return window;
   }
}

4. Adım

FirebaseAuthService’ imizi hazırlıyoruz.

...
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase';
...
loginPhone(phone : string,appVerifier : any){
   return this.fireAuth.auth.signInWithPhoneNumber(phone, appVerifier)
}

5.Adım

Login Component’ imizi hazırlıyoruz.

Sayfamız iki formdan oluşacak;

• Birincisinde Kullanıcıdan telefon numarasını alacağız. Kullanıcının telefon numarası uluslararası formatta olmalıdır. (+905….)

<form [formGroup]="phoneForm" (ngSubmit)="logIn(phoneForm)">
   <div class="form-group">
      <label for="usr">Phone Number :</label>
      <input type="text" formControlName="phone" class="form-control" id="phone">
   </div>
   <div class="form-group">
      <button type="submit" id="sign-in-button" class="btn btn-primary btn-block">Login</button>
   </div>
</form>

• İkincisinde kullanıcının telefonuna gelen doğrulama kodunu gireceği bir form

<form [formGroup]="codeForm" (ngSubmit)="verifyCode(codeForm)">
   <div class="form-group">,
      <label for="usr">Code :</label>
      <input type="text" formControlName="code" class="form-control" id="code">
   </div>
   <div class="form-group">
      <button type="submit" class="btn btn-primary btn-block">Verify Code</button>
   </div>
</form>

Ben form kullandım, basit iki adet input da kullanabilirdik.

...
import { FirebaseAuthService } from 'src/app/services/firebase/firebase-auth.service';
import { ActivatedRoute } from '@angular/router';
import * as firebase from 'firebase';
import { WindowService } from 'src/app/services/window/window.service';
phoneForm: FormGroup;
codeForm: FormGroup;
windowRef: any;
constructor(public fb: FormBuilder, public fireAuthService: FirebaseAuthService, public activatedRoute: ActivatedRoute, public win: WindowService) {
   this.createPhoneForm();
   this.createCodeForm();
}
ngOnInit() {
   this.windowRef = this.win.windowRef;
   this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
      'size': 'invisible'
   });
}
createPhoneForm() {
   this.phoneForm = this.fb.group({
      phone: []
   })
}
createCodeForm() {
   this.codeForm = this.fb.group({
      code: []
   })
}
logIn(phoneForm : FormGroup) {
   var appVerifier = this.windowRef.recaptchaVerifier;
   console.log(phoneForm.value.phone);
   this.fireAuthService.loginPhone(phoneForm.value.phone, appVerifier).then(res => {
      this.windowRef.confirmationResult = res;
   }).catch(err => {
      console.log(err);
   })
}
verifyCode(codeForm : FormGroup){
   let code : strin = codeForm.value.code;
   this.windowRef.confirmationResult.confirm(code).then(p => {
      console.log(p);
   }).catch(err => {
      console.log(err);
   });
}

İşlemimiz bu kadar uygulamaya Telefon numaranız ile giriş yaptığınızda bu giriş bilgilerini tarayıcınızın console ekranında görebilirsiniz. Aynı zamanda giriş türüne ve ilgili telefon numarasına Firebase Auth menüsünden kullanıcılar sekmesinden de ulaşabilirsiniz.