ผู้เขียน หัวข้อ: Social Login (อ่าน 2683 ครั้ง)

smf

Mod Name:Social Login
http://custom.simplemachines.org/mods/index.php?mod=3580
Type:Socialization

Mod ตัวนี้ทำหน้าที่ให้สมาชิก Register SMF ด้วยพวก Social Networks ต่างๆ เช่น
- Facebook
- Twitter
- Google
- Yahoo

ความสามารถของ Mod Social Login คือเป็นเสมือนตัวแทนการเชื่อมต่อการ Login ระหว่าง 20+ Social Networks กับ SMF เพื่อสะดวกเป็นทางเลือกให้กับสมาชิกใช้ ID เดียวกันกับ Social Networks ได้ Mod Social Login นี้ทำการเชื่อมต่อ Login เพียงอย่างเดียว ซึ่งต่างจาก SA Facebook Integration ตรง SA สามารถแชร์กระทู้ขึ้นเฟสได้ แต่ SA ก็ทำได้แค่ login ด้วยเฟสเท่านั้น ส่วน Mod Social Login สามารถทำ login ได้หลากหลาย Social Networks กว่า

ติดตั้งม็อดเสร็จแล้วไปตั้งค่าระบบที่ admin/ หัวข้อ OneAll Social Login/Configuration ตามรูป

[1] ไปสมัครสมาชิกที่ oneall.com ก่อน https://app.oneall.com/signup/ เพื่อเป็นตัวกลางระหว่าง Social ต่างๆ

[2] Choose your OneAll Site Subdomain ใส่ชื่อที่จะเป็น Sub Domain ของ oneall.com ห้ามซ้ำกับท่านอื่นๆ (ง่ายๆใส่ชื่อเว็บเรา)
Give your Site aname ใส่ชื่อเว็บเรา
Where will you use our services? Enter the domain name(s) of your own website(s) ใส่ชื่อโดเมนของเว็บเรา (ถ้าเป็น subdomain ก็ใส่subdomainเลย ระบบจะแยกออกให้เอง)แล้วกด Create this Site

[3] จะได้ Subdomain: , Public Key: , Private Key: และ Domain - Send API นำ 3 อันแรก นำกลับไปใส่ที่หน้า API Settings ของ SMF

[4] ใส่ API Subdomain: API Public Key: API Private Key: ที่ได้ก่อนหน้านี้ ลงใน API Settings ของ SMF
แล้วกด Click here to verify the API Setting จนข้อความสีเขียวปรากฎ Successfully!

[5] กลับมาที่หน้า Site Configuration /Social Networks /facebook

[6] Setup for Facebook

[7] ทำตาม 9 ข้อ ต้องไปเอา ID APP กับ App Secret ของเฟสบุคมาใส่ในข้อที่ 9 (วิธีทำไล่ไปทีละข้อ ดูหัวข้อถัดไปด้านล่าง)

ขั้นตอนการสร้าง App Facebook
[8] ไปสมัครบัญชีเฟสบุคแล้วไปที่ https://developers.facebook.com/apps ทำการสร้างแอพใหม่ Create New App
ช่อง Display Name ใส่ชื่อเว็บ (หรือชื่อเราปราถนา)
ช่อง Namespace ใส่ชื่อที่จะใช้ในการพัฒนาเพจ สำหรับนักพัฒนาเพื่อสร้างเพจทดสอบ เว้นว่างเมื่อเห็นว่าเกินความจำเป็นสำหรับเรา
เลือกหมวดหมู่ แล้วคลิก สร้างแอพ

[9] ได้ ID APP กับ App Secret นำกลับไปใส่ในข้อที่ 9 ของ app.oneall.com

[10] ใส่ App ID กับ App Secret จาก App Facebook

[11] กลับมาที่ App Facebook คลิกที่ การตั้งค่า ทางซ้ายมือ ใส่อีเมล์ กด + Add Platform

[12] เลือกเว็บไซต์

[13] นำ Subdomain ที่เรากรอกไว้ตั้งแต่แรกมาใส่ ดูภาพหัวข้อ[10] ที่ข้อ 6 กดบันทึกการเปลี่ยนแปลง

คลิกที่ Status & Review กด ใช่ (Yes) เพื่อตรวจสอบสถานะการใช้งานของแอพให้ถูกต้อง

ทดสอบสมัครสมาชิกกับ เฟสบุค สำเร็จ

เพิ่มเติมใส่ Icons App

คลิกที่เมนู App Details

วิธีตั้งค่า Twitter App
ถ้าไม่ได้ตั้งค่าใน App จะขึ้นข้อความ Could not connect to Twitter

เข้า Login : https://app.oneall.com/applications/ (ท่านใดยังไม่มีบัญชีโปรดดูบทความข้างต้น)
เข้า Site Configuration / ชื่อเว็บที่เราตั้งไว้ / Social Networks / Twitter

คลิก Setup ShoppingWelovethailand for Twitter

ตั้งค่าตามใน 6 ขั้นตอน (แท็บสีเหลืองในข้อ2 ระบบร้องขอให้เราใส่เบอร์โทรศัพท์ในโปรไฟล์ทวีตของเราก่อน)

ตั้งค่า Twitter Apps
[1] เปิดบัญชีทวีตแล้วทำการ Login : https://twitter.com/
[2] เปิดใช้งาน Twitter Apps https://apps.twitter.com/ กด Create New App

[3] Application details ใส่รายละเอียดของเว็บเรา
Name :
Description :
Website :
Callback URL :

ติ๊ก Yes, I agree กด Create your Twitter application จะได้ดังภาพด้านล่าง

นำ API key กับ API Secret กลับไปใส่ ข้อที่ 6 ของ app.oneall.com/applications

[4] กลับมาที่ apps.twitter.com/app/ คลิกที่แท็บ Settings. Open the panel Settings, tick the checkbox ติ๊กเช็คบ็อค Allow this application to be used to Sign in with Twitter แล้วกด Update setting

[5] คลิกที่แท็บ Permissions. Open the panel Permissions, เลือก Read and Write แล้วกด Update setting

ทดสอบสมัครสมาชิกผ่าน ทวีตเตอร์

ระบบร้องขอให้ใส่อีเมล์

เข้าระบบสำเร็จ

วิธีตั้งค่า YouTube App
ขั้น ตอนการทำจะมีอธิบายไว้ในหน้า Site Configuration/Social Networks/YouTube ใน 7 ขั้นตอน เช่นเดียวกับ วิธีตั้งค่าของ แอพอื่นๆ ในเว็บ https://app.oneall.com/

อันดับแรก Login : https://app.oneall.com/ ที่เปิดบัญชีไว้ก่อนหน้านี้แล้วคลิกเลือกไซต์ที่เราต้องการ (ในตัวอย่างผมสร้างไว้ใช้ 2 ไซต์)

วิธีทำมี 7 ขั้นตอน

โดยทำดังนี้ Login ด้วยบัญชี Google แล้วไปที่ https://cloud.google.com/console
ขั้นตอนทำตามภาพได้เลยครับ

แต่ชื่อ User ใน Profile/Account Settings จะเป็นรหัสในแบบฉบับของ youtube นะครับ

และใน Profile/Forum Profile ด้านล่างในหัวข้อของ URL เว็บไซต์ของคุณ : จะมี Url ของรหัสในแบบฉบับของ youtube อยู่ด้วย
จบ.

-ผมลองทำตามแล้วครับ ขึ้นแบบนี้ครับ

-ใส่ url ถูกต้องหรือไม่ให้เช็คดูตามตัวอย่างที่ผมทำไว้

credit: http://www.welovethailand.com/webboard/index.php/topic,4296.0.html

smf

Simpleportal to Easier add icons to social login.

Add new block and slect "PHP content"

Add this code

โค๊ด: [Select]

{
	global $txt, $modSettings, $boardurl;
	
	if (!empty ($modSettings['oasl_api_key']) && !empty ($modSettings['oasl_enabled_providers']))
	{		
		// Extract the chosen providers.
		$providers = explode (',', trim ($modSettings['oasl_enabled_providers']));
		
		// Create Random integer to prevent id collision.
		$rand = mt_rand (99999, 9999999);

		// Separe from the traditional login.
		echo '<hr />';		
				
		// Display error messages if there are any.		
		if ( isset ($_REQUEST['oasl_err']))
		{
			switch ($_REQUEST['oasl_err'])
			{
				case 'user_does_not_exist':
					echo '<p class="error">'.$txt['oasl_user_does_not_exist'].'</p>';
				break;
				
				case 'user_require_activation':
					echo '<p class="error">'.$txt['oasl_user_require_activation'].'</p>';
				break;
				
				case 'user_registration_disabled':
					echo '<p class="error">'.$txt['oasl_user_may_not_register'].'</p>';
				break;			
			}
		}
		
		if ( ! empty ($modSettings['oasl_settings_login_caption']))		
		{
			echo '
				<p style="text-align:left;">
					<strong>', $modSettings['oasl_settings_login_caption'], '</strong>
				</p>';		
		}
		
		echo '
			<p style="text-align:left;">
				<div class="oneall_social_login_providers" id="oneall_social_login_providers_', $rand, '"></div>
				<script type="text/javascript">
					oneall.api.plugins.social_login.build("oneall_social_login_providers_', $rand, '", {
						"providers": [\'', implode ("', '", $providers), '\'],
						"callback_uri": \'', $boardurl, '/index.php?action=oasl_callback;oasl_source=login\',
					});
				</script>
				<!-- OneAll.com / Social Login for SMF -->				
			</p>';
	}
}

Can anyone help in centering the social media icons that are displayed?

add this to the end of your index.css

โค๊ด: [Select]

.oneall_social_login_providers {
margin: 0 auto;
width: 152px;
}

smf

I added this code to the end of my index.css file.

โค๊ด: [Select]

/* Styles for Social Login Buttons */

.plugin #providers .provider {
  width: 50px !important;
  margin-bottom: 2px !important;
  padding: 2px 4px 4px;
}
 
.plugin #providers .provider .name {
  display: none !important;
}
 
.plugin #providers .provider .button {
  background: url("http://appliancejunk.com/images/social/facebook_24x24.gif") no-repeat scroll 0 0 transparent !important;
  height: 24px !important;
  width: 24px !important;
}

and I added this code to my index.template.php file

โค๊ด: [Select]

<div id="social_login_container"></div>

<script type="text/javascript">
 oneall.api.plugins.social_login.build("social_login_container", {
  "providers" :  ["facebook", "twitter", "google", "yahoo", "openid", "windowslive"],
  "callback_uri": "http://appliancejunk.com/forums/index.php?action=oasl_callback;oasl_source=register",
  "css_theme_uri": "http://appliancejunk.com/forums/social_login.css"
  });
</script>';

แจกของฟรี

ข่าว:

ผู้เขียน หัวข้อ: Social Login (อ่าน 2683 ครั้ง)

smf

Social Login

smf

Re: Social Login

smf

Re: Social Login