Ionic Facebook Login Example

Ionic Facebook Login Örneği

Ionic, mobil uygulamalar oluşturmak için kullanılan açık kaynaklı bir çerçevedir. Facebook Login, kullanıcıların Facebook hesaplarını kullanarak mobil uygulamalara giriş yapmalarını sağlayan bir eklentidir. Bu makalede, Ionic Facebook Login eklentisini kullanarak bir mobil uygulamaya Facebook ile giriş özelliği nasıl eklenir, adım adım anlatılacaktır.

Gereksinimler

• Ionic CLI
• Node.js
• Facebook Geliştirici Hesabı

Adımlar

1. Ionic projesi oluşturun.

ionic start my-app blank

1. Facebook Geliştirici Hesabı oluşturun.

Facebook Geliştirici Hesabı oluşturmak için şu adımları izleyin:

• Facebook’a giriş yapın.
• https://developers.facebook.com/ adresine gidin.
• “Uygulama Oluştur” düğmesine tıklayın.
• Uygulama adı, kategori ve diğer bilgileri girin.

• “Uygulama Oluştur” düğmesine tıklayın.

• Facebook Geliştirici Konsoluna gidin.

Facebook Geliştirici Konsoluna gitmek için şu adımları izleyin:

• https://developers.facebook.com/ adresine gidin.
• “Uygulamalarım” sekmesine tıklayın.

• Uygulama adınıza tıklayın.

• Uygulama Kimliği ve Uygulama Sırrı’nı alın.

Uygulama Kimliği ve Uygulama Sırrı’nı almak için şu adımları izleyin:

• “Ayarlar” sekmesine tıklayın.
• “Temel Ayarlar” bölümüne gidin.

• “Uygulama Kimliği” ve “Uygulama Sırrı” alanlarını bulun.

• Ionic projenize Facebook Login eklentisini yükleyin.

ionic cordova plugin add cordova-plugin-facebook4

1. config.xml dosyasını düzenleyin.

config.xml dosyasını açın ve aşağıdaki satırları ekleyin:

<preference name="facebookAppId" value="YOUR_APP_ID" />
<preference name="facebookDisplayName" value="YOUR_APP_NAME" />

“YOUR_APP_ID” yerine Uygulama Kimliğinizi ve “YOUR_APP_NAME” yerine Uygulama Adınızı yazın.

1. app.component.ts dosyasını düzenleyin.

app.component.ts dosyasını açın ve aşağıdaki satırları ekleyin:

“`
import { Facebook, FacebookLoginResponse } from ‘@ionic-native/facebook/ngx’;

@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’,
styleUrls: [‘app.component.scss’]
})
export class AppComponent {

constructor(private facebook: Facebook) { }

loginWithFacebook() {
this.facebook.login([’email’]).then((res: FacebookLoginResponse) => {
console.log(‘Logged into Facebook!’, res);
}).catch(e => {
console.log(‘Error logging into Facebook’, e);
});
}

}
“`

1. Uygulamayı çalıştırın.

ionic serve

1. Facebook ile giriş yapın.

Uygulama çalıştığında, Facebook ile giriş yapmak için “Facebook ile Giriş Yap” düğmesine tıklayın.

1. Kullanıcı bilgilerini alın.

Kullanıcı Facebook ile giriş yaptıktan sonra, kullanıcı bilgilerini almak için aşağıdaki satırları kullanabilirsiniz:

this.facebook.api('/me?fields=id,name,email', []).then((res) => {
console.log('Got user info', res);
});

İndirme Linki

Ionic Facebook Login eklentisinin indirme linki: https://github.com/ionic-team/cordova-plugin-facebook4

Üretici Firma

Ionic Facebook Login eklentisinin üretici firması Ionic Team’dir.

Ücretsiz mi?

Ionic Facebook Login eklentisi ücretsizdir.

Uyumlu İşletim Sistemleri

Ionic Facebook Login eklentisi Android, iOS ve Windows Phone işletim sistemleriyle uyumludur.

Dosya Boyutu

Ionic Facebook Login eklentisinin dosya boyutu yaklaşık 1 MB’dir.