স্বয়ংক্রিয়ভাবে রেন্ডার হওয়া সাইন-ইন বোতাম কাস্টমাইজ করা (প্রস্তাবিত)
কাস্টম সেটিংস সহ একটি Google সাইন-ইন বোতাম তৈরি করতে, আপনার সাইন-ইন পৃষ্ঠায় সাইন-ইন বোতাম ধারণ করার জন্য একটি উপাদান যোগ করুন, একটি ফাংশন লিখুন যা আপনার শৈলী এবং সুযোগ সেটিংস সহ signin2.render() কল করে এবং https://apis.google.com/js/platform.js অন্তর্ভুক্ত করুন ক্যোয়ারী স্ট্রিং সহ https://apis.google.com/js/platform.js স্ক্রিপ্ট onload=YOUR_RENDER_FUNCTION ।
নিম্নলিখিতটি একটি Google সাইন-ইন বোতামের একটি উদাহরণ যা কাস্টম শৈলী পরামিতিগুলি নির্দিষ্ট করে:
নিম্নলিখিত HTML, JavaScript, এবং CSS কোড উপরের বোতামটি তৈরি করে:
<html>
<head>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
</head>
<body>
<div id="my-signin2"></div>
<script>
function onSuccess(googleUser) {
console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
}
function onFailure(error) {
console.log(error);
}
function renderButton() {
gapi.signin2.render('my-signin2', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
</script>
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</body>
</html>
এছাড়াও আপনি একটি কাস্টম Google সাইন-ইন বোতামের জন্য সেটিংস নির্দিষ্ট করতে পারেন g-signin2 ক্লাসের সাথে একটি div উপাদানের data- বৈশিষ্ট্যগুলি সংজ্ঞায়িত করে। উদাহরণ স্বরূপ:
<div class="g-signin2" data-width="300" data-height="200" data-longtitle="true">
একটি কাস্টম গ্রাফিক সহ একটি বোতাম তৈরি করা
আপনি আপনার সাইটের ডিজাইনের সাথে মানানসই একটি Google সাইন-ইন বোতাম তৈরি করতে পারেন৷ আপনাকে অবশ্যই ব্র্যান্ডিং নির্দেশিকা অনুসরণ করতে হবে এবং আপনার বোতামে উপযুক্ত রং এবং আইকন ব্যবহার করতে হবে। ব্র্যান্ডিং নির্দেশিকাগুলি আইকন সম্পদও প্রদান করে যা আপনি আপনার বোতাম ডিজাইন করতে ব্যবহার করতে পারেন। আপনাকে অবশ্যই নিশ্চিত করতে হবে যে আপনার বোতামটি অন্যান্য তৃতীয় পক্ষের লগইন বিকল্পগুলির মতোই বিশিষ্ট।
নিম্নে একটি কাস্টম গ্রাফিক সহ নির্মিত একটি Google সাইন-ইন বোতামের উদাহরণ:
নিম্নলিখিত HTML, JavaScript, এবং CSS কোড উপরের বোতামটি তৈরি করে:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<script src="https://apis.google.com/js/api:client.js"></script>
<script>
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customBtn'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
document.getElementById('name').innerText = "Signed in: " +
googleUser.getBasicProfile().getName();
}, function(error) {
alert(JSON.stringify(error, undefined, 2));
});
}
</script>
<style type="text/css">
#customBtn {
display: inline-block;
background: white;
color: #444;
width: 190px;
border-radius: 5px;
border: thin solid #888;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
}
span.label {
font-family: serif;
font-weight: normal;
}
span.icon {
background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 42px;
padding-right: 42px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<!-- In the callback, you would hide the gSignInWrapper element on a
successful sign in -->
<div id="gSignInWrapper">
<span class="label">Sign in with:</span>
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
<div id="name"></div>
<script>startApp();</script>
</body>
</html>