"> ایجاد فرم ورود به سایت توسط GooglePlus در ASP.NET MVC

ایجاد فرم ورود به سایت توسط GooglePlus در ASP.NET MVC

GooglePlus

در این آموزش یاد خواهید گرفت که چگونه در پروژه های MVC خود در ASP.NET با استفاده از حساب کاربری GooglePlus عملیات ثبت نام / ورود را انجام بدید! یعنی باحراز هویت با استفادا از اکانت GooglePlus صورت بگیره

برای اینکار کافیست که یک پروژه empty MVC application را در ویژوال استدیو خود باز کنید .

مراحل ایجاد پروژه به این شکل میشود:

  1. وارد Visual Studio شوید از منو File گزینه NewProject را زده .
  2. سپس از منو سمت چپ گزینه Visual C# را انتخاب کرده .
  3. از زیر مجموعه های این قسمت گزینه Web را انتخاب کنید. و یک نام برای پروژه خود در نظر بگیرید به عنوان مثال در اینجا ما نام DemoGPlusAPI را انتخاب میکنیم.
  4. حالا در  dialog box روی “MVC”  کلیک کنید(زیر ASP.NET 4.5.2 Templates) سپس روی “Change Authentication” کلیک کنید و درنهایت “No Authentication”  را انتخاب کنید.
  5. سپس با کلیک بر روی گزینه Ok پروژه ایجاد میشود.

GooglePlus

مرحله بعدی این است که برای Sign in / Login کردن با استفاده از گوگل پلاس باید در اکانت گوگل خود یک اپلیکیشن ایجاد کنیم.

برای ایجاد این اپلیکیشن نیاز است که کار های زیر را انجام دهیم . پس باما همراه باشید.

GooglePlus

ابتدا به قسمت Google Developer Console رفته و با استفاده از اکانت گوگل یا جی میل خود login کنید.

سپس از منوی سمت چپ گزینه Library را انتخاب کرده و Enable API را بزنید.

 آموزش احراز هویت

در این بخش گزینه های Social API و GooglePlus API را انتخاب کنید

 آموزش MVC

روی ENABLE کلیک کرده .

 GooglePlus در ASP.NET MVC

 

در سمت راست “Go To Credentials” را انتخاب کنید.

 احراز هویت کاربر با GooglePlus

حالا برای تنظیماتی که مورد نیاز است  گزینه ” Web browser JavaScript ” را انتخاب کنید.

برای تعیین داده هایی که می خواهید به آن ها دسترسی داشته باشید “User Data” را انتخاب کنید.

سپس روی “What credentials do I need?” کلیک کنید

 فرم لاگین با GooglePlus

در مرحله آخر لازم است که یک اپلیکیشن برای OAuth 2.0 client ID ایجاد کنیم.

یک نام برای اپلیکیشن خود انتخاب کرده سپس URL یا آدرس اصلی و Redirect URL یا آدرسی که ریدایرکت می شود را انتخاب کرده و “Create client ID” را بزنید.

 آموزش MVC

 

  • Redirect URL بعد از اجرا درخواست کاربر Trigger به این صفحه ریدایرکت منتقل میشود.
  • Origin Url حاوی در خواست کاربر میباشد.

برای به دست آوردن Origin URL روی “DemoGPlusAPI” از پروژه تان راست کلیک کنید و “Web”  را انتخاب کنید. سپس Project URLتان را کپی کنید.

حالا روی “Download” کلیک کنید سپس می توانید Client ID و Client Secret تان را به دست آورید.

 ورود به سایت با GooglePlus

و اما پیاده سازی این اپلیکیشن در برنامه به این صورت است :

ابتدا مانند کد زیر یک ActionMethod  ایجاد کنید:


<pre class="lang:c# decode:true">	public ActionResult Index() {  
	    return View();  
	}  
</pre>

در داخل قسمت View پروژه ی خود  کدهای زیر را کپی کنید.
<pre class="lang:c# decode:true">	
        	@ {  
	    ViewBag.Title = "Google Plus API";  
	} div class = "row" h2 Google + Login / Sign in /h2br / button class = "btn btn-danger" 4. id = "googleplus" Google + API /buttonbr / /div 
	@section Scripts { link href = "https://fonts.googleapis.com/css?family=Roboto" 6. rel = "stylesheet" 7. type = "text/css" script src = "https://apis.google.com/js/api:client.js" /scriptscript  
	        var googleUser = {};  
	    var startAppA = function() {  
	        gapi.load('auth2', function() {  
	            //Retrieve the singleton for the GoogleAuth library and set up the client.  
	            auth2 = gapi.auth2.init({  
	                client_id: '1047328192927-jch54k8ecj884h0ahfr685b9e10u23kd.apps.googleusercontent.com',  
	                secret_key: 'UCtG15hTOnTKzsPKsI8rMQ0X',  
	                cookiepolicy: 'single_host_origin',  
	            });  
attachSignin(document.getElementById('googleplus'));  
        });  
    };  
	  
	    function attachSignin(element) {  
	        auth2.attachClickHandler(element, {}, function(googleUser) {  
	            debugger;  
	            $(".se-pre-con").show();  
	            console.log(googleUser);  
	            var profiles = googleUser.getBasicProfile();  
	            var ReturnUrl = 'http://localhost:58066/Home/ReturnURL';  
	            //Crate A Bunch Of Object for Search  
	            var objData = {  
	                Email: profiles.getEmail(),  
	                LastName: profiles.getFamilyName(),  
	                FirstName: profiles.getGivenName(),  
	                GoogleID: profiles.getId(),  
	                ProfileURL: profiles.getName(),  
	            };  
	            $.ajax({  
	                type: "POST",  
	                url: '@Url.Action("ReturnURL", "Home")',  
	                data: objData,  
	                datatype: "json",  
	                success: function(data) {  
	                    alert("Successfully Done");  
	                }  
	            });  
	            $(".se-pre-con").hide();  
	        }, function(error) {  
	            alert(JSON.stringify(error, #ff0000, 2));  
	        });  
	    } /scriptscript startAppA(); /script 
	}

</pre>

سپس یک متد JsonResult   برای نتایج ایجاد کنید. که اطلاعات را برای ما برگرداند.
<pre class="lang:c# decode:true">	[HttpPost]  
	public JsonResult ReturnURL(string Email, string FirstName, string LastName, string GoogleID, string ProfileURL) {  
	    //Do your code for Signin or Signup  
	    return Json(true, JsonRequestBehavior.AllowGet);  
	}
</pre>

با کمی مطالعه ی کد ها نحوه ی عملکرد دقیق این کد هارا یاد میگیرید که به چه صورت است.

  • پسورد: www.mspsoft.com
کیوان غلامی

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.