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

در این آموزش یاد خواهید گرفت که چگونه در پروژه های 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 پروژه ایجاد میشود.

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

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

GooglePlus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ابتدا مانند کد زیر یک 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>

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