Javscript

GitHub ile Meteor Sosyal Girişi. Hepimiz bunun ne kadar zaman alıcı olduğunu biliyoruz… | tarafından Henrique A Schmaiske

Bir uygulamayla sosyal oturum açma yapılandırmanın ne kadar zaman alıcı olduğunu hepimiz biliyoruz. Neyse ki Meteor, farklı üçüncü taraf kimlik doğrulama yöntemleri ve kutudan çıktığı gibi bir hesap yönetim sistemi ile birlikte gelir. kullanacağız accounts-github Uygulamamıza giriş yapmak için GitHub hesabınızı kullanabilmek için.

Yeni bir tane oluşturarak başlayın Meteor proje. Bir sonraki adıma geçmeden önce proje klasörünü girin ve doğru olduğundan emin olmak için çalıştırın.

Varsayılan olarak Meteor, React’i kullanır ve proje oluşturulduğunda aynı ada sahip bir alt dizin oluşturur.

$ meteor create meteor-github-login

$ cd meteor-github-login

$ meteor run

Aşağıdaki ekranı görmelisiniz:

Sayaçlı varsayılan oluşturulan Meteor uygulaması

kullanacağız accounts-github Uygulamamıza giriş yapmak üzere GitHub hesabınızı kullanabilmek için:

$ meteor add accounts-github

Ayrıca GitHub gizli anahtarlarınızı ayarlamak için ‘hizmet yapılandırması’ paketini ekleyin:

$ meteor add service-configuration

Desteklenen daha birçok kimlik doğrulama yöntemi vardır. Hesap sistemi hakkında daha fazla bilgi edinebilirsiniz burada.

Kullanıcının GitHub hesabıyla giriş yapmak için bir açılır pencere açmak için tıklayacağı bir düğme bileşeni oluşturmamız gerekiyor.

Kullanmalısın Meteor.loginWithGitHub(); işlev ve ona 2 argüman iletin: requestPermissions ve loginStyle ilki GitHub’dan kullanıcı bilgilerini almak, ikincisi ise açılır penceremizi açmak.

imports/ui/LoginWithGithub.jsx

import React from 'react'
import { Meteor } from 'meteor/meteor'
export const LoginWithGithub = () => {
const handleGithubLogin = () => {
Meteor.loginWithGithub({
requestPermissions: ['user'],
loginStyle: 'popup',
})
}
return (
<button type="button" className="github-btn" onClick={handleGithubLogin}>
Login with Github
<div>
<svg fill="#000000" viewBox="0 0 30 30" width="20px" height="20px">
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z" />
</svg>
</div>
</button>
)
}

Ayrıca, onu güzelleştirmek için biraz stil ekleyelim:

client/main.css

.github-btn {
border: 1px solid #e1e5f0;
background-color: #fff;
width: 245px;
color: black;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.github-btn > div {
margin-left: 4px;
}

Yeni bileşenimizi dosyamıza aktarmamız gerekiyor. App.jsx Merhaba ve Bilgi bileşenlerini kaldırarak küçük bir temizlik yapmayı da seviyorum.

imports/ui/App.jsx

import React from 'react'
import { LoginWithGithub } from './LoginWithGithub.jsx'
export const App = () => {
return (
<div>
<h1>Meteor Login With Github</h1>
<LoginWithGithub />
</div>
)
}

GitHub girişimizin çalışması için önce GitHub Kimlik Bilgilerimizi almamız gerekiyor.

OAuth Başvurunuzu Kaydedin bu bağlantıda Doldur Application Name , Homepage URL ve Authorization callback URL her iki URL için de kullanabilirsiniz http://localhost:3000 şimdilik.

Tıklamak Register Application

Bir sonraki ekranda, Client ID, tıklamak Generate a new client secret ve yeni müşteri sırrınızı kopyalayın.

GitHub’a bağlanmak için bu anahtarların her ikisini de kullanacağız.

Şimdi sunucumuzu GitHub’a tam olarak bağlanacak şekilde yapılandırmamız gerekiyor, server/main.js ve içe aktarın ServiceConfiguration GitHub kimlik bilgilerinizi eklemek için.

Ayrıca kodumuzu daha temiz tutmak için her şeyi buradan kaldırdım.

server/main.js

import { Meteor } from 'meteor/meteor'
import { ServiceConfiguration } from 'meteor/service-configuration'
Meteor.startup(() => {})ServiceConfiguration.configurations.upsert(
{ service: 'github' },
{
$set: {
loginStyle: 'popup',
clientId: '', // insert your clientId here
secret: '', // insert your secret here
},
},
)

Mükemmel! Artık GitHub kimlik doğrulamanızı yapılandırdınız, kendi GitHub hesabınızla oturum açmayı deneyebilirsiniz.

Kullanıcımızın giriş yapıp yapmadığını doğrulamak için basit bir mantık oluşturabiliriz. kullanabiliriz useTracker kullanıcı verilerimizi almak için kanca Meteor.user() ve ayrıca Meteor.logout() kullanıcımızın sistemden çıkış yapması için.

Evet, bu kadar basit, her şeyin çalışması için hiçbir ortak plaka veya yapılandırma olmadan.

imports/ui/App.jsx

import React from 'react'
import { Meteor } from 'meteor/meteor'
import { useTracker } from 'meteor/react-meteor-data'
import { LoginWithGithub } from './LoginWithGithub.jsx'
export const App = () => {
const user = useTracker(() => Meteor.user())
const handleLogout = () => Meteor.logout()
return (
<div>
<h1>Meteor Login With Github</h1>
{user ? (
<div>
<p>Logged in as: {user.services.github.email}</p>
<button onClick={handleLogout}>Logout</button>
</div>
) : (
<LoginWithGithub />
)}
</div>
)
}

Uygulamanızı açın ve aşağıdaki ekran görüntüsünü görmelisiniz:

Tabii ki, bu oldukça basit, ama şimdi Meteor ile bir Sosyal Girişi nasıl kullanacağınız, diğer sağlayıcılar da buna oldukça benzer.

Bu eğitimin kodunu bu konuda kontrol edebilirsiniz. depo.

https://docs.meteor.com/api/accounts.html

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu