در این آموزش یاد خواهید گرفت که چگونه در پروژه های MVC خود در ASP.NET با استفاده از حساب کاربری GooglePlus عملیات ثبت نام / ورود را انجام بدید! یعنی باحراز هویت با استفادا از اکانت GooglePlus صورت بگیره
برای اینکار کافیست که یک پروژه empty MVC application را در ویژوال استدیو خود باز کنید .
مراحل ایجاد پروژه به این شکل میشود:
- وارد Visual Studio شوید از منو File گزینه NewProject را زده .
- سپس از منو سمت چپ گزینه Visual C# را انتخاب کرده .
- از زیر مجموعه های این قسمت گزینه Web را انتخاب کنید. و یک نام برای پروژه خود در نظر بگیرید به عنوان مثال در اینجا ما نام DemoGPlusAPI را انتخاب میکنیم.
- حالا در dialog box روی “MVC” کلیک کنید(زیر ASP.NET 4.5.2 Templates) سپس روی “Change Authentication” کلیک کنید و درنهایت “No Authentication” را انتخاب کنید.
- سپس با کلیک بر روی گزینه 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>
با کمی مطالعه ی کد ها نحوه ی عملکرد دقیق این کد هارا یاد میگیرید که به چه صورت است.
هیچ دیدگاهی نوشته نشده است.