ASP NET CORE RAZOR PAGE BAKIM TEKNİK SERVİS PROJESİ 027 FACEBOOK İLE ÜYELİK

Bu dersimizde de Facebook ile üyelik işlemlerini gerçekleştirelim. Bir çok web sitesine üye olurken Facebook ile kaydol, google ile kaydol gibi seçennekleri görmüşsünüzdür. Bizde şimdi tam olarak bunun aynısını projemize uygulayacağız. Asp. Net Core 3 versiyonundan önce Facebook, Google gibi sosyal medya plaformları aracılığı ile üyelik işlemleri ASP. NET Core yapısının içinde gelmekte idi. Ancak Asp. Net core 3 versiyonundan sonra bu paketler ayrıldı. Dolayısı ile bizim projelerimize eğer bu şekilde üyelik kayıt etmek istiyor isek ilgili paketlerimizi yüklememiz gerek.

Detaylı anlatım ve video takibi için videoya mutlaka göz atınız.

Şimdi Facebook ile giriş için ilgili paketi yüklemekle işe başlayalım. Tools menüsünde Nuget Packages Manager altında yer alan Manage Nuget Packages for solution seçeneğini seçip, ilgili arama sayfasını açıyoruz. Burada Browse diyorum ve akabinde Facebook diyerek aramamı yapıyorum. Bulunanlar içinde Microsoft.AspNetCore.Authentication.Facebook olan paketi yüklüyorum.

Facebook Üzerinden Ayarlarımız:

Şimdi buradan da developers.facebook.com adresine gidiyorum. Öncesinde normal facebook’a giriş yaptığınızdan emin olun. Developers.facebook.com adresine geldiğimde;

MyApps menüsünü seçiyorum.

Akabinde applicationlarımın olduğu sayfa açılıyor. Daha önceden var ise burada daha önceki uygulamalarınızı görebilirsiniz. Eğer yok ise bir şey göremeyeceksiniz.

Create App diyorum.

• 

Daha sonra çıkan pencerede; facebook ile login işlemi yapmak istediğim için Build Connected Experiences seçiyorum.

Daha sonra çıkan pencerede Display Name alanına bir isim veriyorum. Ben proje adımı verdim. Akabinde iletişim email adres bilgisi isteniyor. Bunları yazdıktan sonra Create App diyorum.

Robot olmadığınıza dair doğrulama kontrolünün akabinde aşağıdaki gibi bir ekran geliyor.

Burada sol tarafta Settings altında yer alan Basic kısmını seçiyorum.

Burada yer alan App Id alanındaki ID verisini kopyalıyorum. (Video versiyonda tüm işlemleri net görebilirsiniz. Yazı versiyonunda kod ile eşleşmeyeceği için burada gizlenmiştir, önemli bir bilgi değildir, sadece eşleşmeme durumu için gizledim, iki ayrı örnek yaptım yani 😊. Yoksa mühim bi bilgi değil yukarıdaki ID, Test adında bir uygulama zaten 😊)

Bir de ek olarak aşağıdaki App Secret alanında Show butonuna basıyorum, bunu da alacağım.

Projemde Startup.cs’ye geliyorum ve Facebook ile kayıt olabilmek için ConfigureServices altında ilgili servisi etkinleştirmek için aşağıdaki şekilde kodlarımı yazıyorum.

services.AddAuthentication().AddFacebook(fb =>
            {
                fb.AppId = "806339729944423";
                fb.AppSecret = "cff8cdbd26336e61d9589c5512c07a7e";
            });

Facebook Ayarları Devam

Buradaki işlemim bitince developers.facebook.com adresine dönüyorum.

Sol tarafta Dashboard seçiyorum, ekranı biraz kaydırıyorum ve Facebook Login alanında Set Up tıklıyorum.

Aşağıdaki gibi alan çıkıyor, web seçiyorum.

Daha sonra çıkan pencere aşağıdaki gibi.

Burada Site Url kısmına projemin çalıştığı adresi yapıştırıyorum. Bizim projemiz şu an localhostta olduğu için buraya localhost adresi geliyor tabi. Sitemiz doğrudan bir web adresinde olsa idi bu adresi yazacaktık. İleride diyelim ki siteyi yayımlama kararı aldık, buranın değişmesi lazım. Save diyorum kaydediyorum. Akabinde Continue çıkacak, Continue diyorum.

Aşağıda 2,3,4 ve 5 nolu alanlar için bilgi veren kısımlar mevcut. ASP.Net Core projemde yüklediğim facebook paketi sayesinde bu entegrasyon işlemleri zaten tamamlandı, dolayısı ile bunlarla işim yok.  Tüm adımlarda (2,3,4 için) Next diyorum. 5. Adımda Back çıkar geriye dönmek isterseniz diye. Burada işim yok.

Daha sonra burada iken soldaki settings seçiyorum

Karşıma aşağıdaki gibi bir pencere geliyor.

Buraya az önce yapıştırdığım localhost adresini yapıştırıyorum hemen ardında da signin-facebook yazdım. Burada URI adresi ile facebook kullanıcıya facebook ile şu şu adreste oturum açılmasına izin veriyor musun diye kullanıcıya soruyor. Akabinde kullanıcı ok derse benim siteme dönüş sağlanıyor.

Tüm startup.cs kodlarım:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Identity.UI;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.EntityFrameworkCore;
using GursoyCNCBakim.Data;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace GursoyCNCBakim
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure< CookiePolicyOptions>(options =>
           {
               options.CheckConsentNeeded = context => true;
               options.MinimumSameSitePolicy = Microsoft.AspNetCore.Http.SameSiteMode.None;
           });

            services.AddDbContext< ApplicationDbContext>(options =>
                options.UseSqlServer(
                    Configuration.GetConnectionString("DefaultConnection")));

            services.AddIdentity< IdentityUser, IdentityRole>().AddDefaultTokenProviders().AddDefaultUI().AddEntityFrameworkStores< ApplicationDbContext>();


            services.AddAuthentication().AddFacebook(fb =>
            {
                fb.AppId = "806339729944423";
                fb.AppSecret = "cff8cdbd26336e61d9589c5512c07a7e";
            });

            services.AddRazorPages().AddRazorRuntimeCompilation();

            services.AddDbContext< ApplicationDbContext>(options =>
                    options.UseSqlServer(Configuration.GetConnectionString("GursoyCNCBakimContext")));
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseDatabaseErrorPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthentication();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
            });
        }
    }
}

Detaylı anlatım ve kod takibi için video eğitime göz atınız. Bir sonraki derste görüşmek üzere.