در این آموزش یاد خواهید گرفت که چگونه در پروژه های 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>
با کمی مطالعه ی کد ها نحوه ی عملکرد دقیق این کد هارا یاد میگیرید که به چه صورت است.
هیچ دیدگاهی نوشته نشده است.