คู่มือการสร้างระบบลงทะเบียนผู้ใช้บน XCode ด้วย ObjC

16 นาที

บทเรียนการเข้าสู่ระบบและการลงทะเบียนผู้ใช้โดยใช้ xcode และ back4app บทนำ ส่วนนี้อธิบายวิธีการสร้างแอปด้วยการลงทะเบียนผู้ใช้ที่ง่ายโดยใช้ ฟีเจอร์หลักของ parse server https //www back4app com/product/parse server ผ่าน back4app นี่คือรูปลักษณ์ที่เป็นไปได้ ในทุกช่วงเวลา คุณสามารถเข้าถึงโปรเจกต์ที่สร้างขึ้นทั้งหมดด้วยบทเรียนนี้ได้ที่ ที่เก็บ github https //github com/templates back4app/ios install sdk ในการทำให้การเริ่มต้นนี้เสร็จสมบูรณ์ คุณต้องการ xcode https //developer apple com/xcode/ แอปที่สร้างขึ้นที่ back4app ติดตาม บทแนะนำการสร้างแอป parse ใหม่ https //www back4app com/docs/get started/new parse app เพื่อเรียนรู้วิธีการสร้างแอป parse ที่ back4app แอป ios ที่เชื่อมต่อกับ back4app หมายเหตุ ติดตาม บทแนะนำการติดตั้ง parse sdk (objc) https //www back4app com/docs/ios/parse objc sdk เพื่อสร้างโปรเจกต์ xcode ที่เชื่อมต่อกับ back4app บัญชีผู้พัฒนา apple ที่ต้องชำระเงิน 1 ตั้งค่า เพิ่ม view controller อีกตัวที่เรียกว่า loggedinviewcontroller ใน storyboard หลัก ลาก view controller ลงบนผืนผ้าใบและตั้งชื่อคลาสเป็น loggedinviewcontroller และตั้ง storyboard id เป็น loggedinviewcontroller ในทั้ง viewcontroller m และ loggedinviewcontroller m ให้แน่ใจว่าคุณได้รวมโมดูล parse โดยการรวมมันที่ด้านบนของไฟล์ \#import \<parse/parse h> 2 สร้าง ui สำหรับการลงทะเบียนและเข้าสู่ระบบของคุณ การเข้าสู่ระบบจะสร้างวัตถุ session ซึ่งชี้ไปที่ผู้ใช้ที่เข้าสู่ระบบ หากการเข้าสู่ระบบสำเร็จ parseuser currentuser() จะคืนค่าวัตถุผู้ใช้ และวัตถุ session จะถูกสร้างใน \แดชบอร์ด\ มิฉะนั้น หากชื่อผู้ใช้ที่ต้องการไม่มีอยู่ หรือรหัสผ่านไม่ถูกต้อง จะคืนค่า null วิธีที่ใช้ในการดำเนินการเข้าสู่ระบบคือ parseuser loginwithusername() , ซึ่งต้องการอาร์กิวเมนต์เท่ากับจำนวนสตริงของชื่อผู้ใช้และรหัสผ่าน และอาจเรียกฟังก์ชัน callback หมายเหตุ หลังจากลงทะเบียนแล้ว การเข้าสู่ระบบจะดำเนินการโดยอัตโนมัติ ลาก uitextfields สี่ตัวไปยัง viewcontroller ใน storyboard หลัก จัดตำแหน่ง textfield ให้อยู่กลางและวางสองตัวที่ด้านบนและสองตัวที่ด้านล่างของ view controller ลาก uibuttons สองตัวไปยัง view และวางไว้ด้านล่าง textfields ตั้งค่าข้อความของปุ่มด้านบนให้เป็น ลงชื่อเข้าใช้ ตั้งค่าปุ่มด้านล่างให้เป็น ลงทะเบียน ตั้งค่า text fields ให้เป็น ชื่อผู้ใช้ และ รหัสผ่าน มันควรจะดูเหมือนแบบนี้ 2\ ต่อไปเราจะเชื่อมต่อ uitextfields ของคุณใน storyboard กับ properties ใน view controller ของคุณ เพิ่ม properties ต่อไปนี้ที่ด้านบนของ viewcontroller m จากนั้นไปที่ storyboard ของคุณและคลิกขวาที่ uitextfield แต่ละตัวและคลิกที่ reference outlet จากนั้นลากเส้นกลับไปที่ไอคอน viewcontroller และตั้งค่าให้ตรงกับฟิลด์ที่เหมาะสม signinusernamefield เชื่อมต่อกับ sign in username field เป็นต้น… สุดท้ายเราจะเพิ่ม uiactivityindicatorview สำหรับภายหลัง @interface viewcontroller (){ iboutlet uitextfield signinusernametextfield; iboutlet uitextfield signinpasswordtextfield; iboutlet uitextfield signupusernametextfield; iboutlet uitextfield signuppasswordtextfield; uiactivityindicatorview activityindicatorview; } 2\ จากนั้นในวิธี viewdidload ตั้งค่า uiactivityindicatorview ให้ติดอยู่กลางหน้าจอ \ (void)viewdidload { \[super viewdidload]; cgrect frame = cgrectmake (120 0, 185 0, 80, 80); activityindicatorview = \[\[uiactivityindicatorview alloc] initwithframe\ frame]; activityindicatorview\ color = \[uicolor bluecolor]; \[self view addsubview\ activityindicatorview]; } 3\ จากนั้นในวิธี viewdidappear ตรวจสอบว่าคุณได้เข้าสู่ระบบแล้วหรือไม่ หากคุณเข้าสู่ระบบแล้วคุณจะเปลี่ยนเส้นทางผู้ใช้ไปยัง loggedinviewcontroller \ (void)viewdidappear (bool)animated { if (\[pfuser currentuser]) { \[self gotomainpage]; } } 4\ ต่อไปให้เพิ่มวิธี gotomainpage มันจะเปลี่ยนเส้นทางผู้ใช้ไปยัง loggedinviewcontroller ตรวจสอบให้แน่ใจว่า loggedinviewcontroller ใน storyboard ได้ตั้งค่าชั้นเรียนและ storyboard id เป็น loggedinviewcontroller \ (void)gotomainpage { nsstring storyboardname = @"main"; uistoryboard storyboard = \[uistoryboard storyboardwithname\ storyboardname bundle nil]; loggedinviewcontroller vc = \[storyboard instantiateviewcontrollerwithidentifier @"loggedinviewcontroller"]; \[self presentviewcontroller\ vc animated\ yes completion\ nil]; } 5\ ตอนนี้เรามาตั้งค่า ibaction ที่จะเชื่อมต่อกับปุ่ม signup บน viewcontroller ใน storyboard หลักกัน \ (ibaction)signup (id)sender { pfuser user = \[pfuser user]; user username = signupusernametextfield text; user password = signuppasswordtextfield text; \[activityindicatorview startanimating]; \[user signupinbackgroundwithblock ^(bool succeeded, nserror error) { \[self >activityindicatorview stopanimating]; if (!error) { \[self gotomainpage]; } else { \[self displaymessagetouser\ error localizeddescription]; } }]; } 6\ เราจำเป็นต้องเพิ่มฟังก์ชัน displayerrormessage เพื่อแสดงข้อความผิดพลาดจากเซิร์ฟเวอร์ เราจะใช้วิธีนี้ทุกครั้งที่เราสื่อสารกับแอป parse ของเรา \ (void)displaymessagetouser (nsstring )message { uialertcontroller alert = \[uialertcontroller alertcontrollerwithtitle @"message" message\ message preferredstyle\ uialertcontrollerstylealert]; uipopoverpresentationcontroller poppresenter = \[alert popoverpresentationcontroller]; poppresenter sourceview = self view; uialertaction okbutton = \[uialertaction actionwithtitle @"ok" style\ uialertactionstyledefault handler ^(uialertaction action) { }]; \[alert addaction\ okbutton]; poppresenter sourcerect = self view\ frame; alert modalpresentationstyle = uimodalpresentationpopover; \[self presentviewcontroller\ alert animated\ yes completion\ nil]; } 7\ ตอนนี้ที่เราสามารถจัดการกับกิจกรรมเครือข่ายและข้อผิดพลาดของเครือข่ายได้แล้ว มาตั้งค่า ibaction ที่จะเชื่อมต่อกับปุ่ม signin บน viewcontroller ใน storyboard หลักกัน \ (ibaction)signup (id)sender { pfuser user = \[pfuser user]; user username = signupusernametextfield text; user password = signuppasswordtextfield text; \[activityindicatorview startanimating]; \[user signupinbackgroundwithblock ^(bool succeeded, nserror error) { \[self >activityindicatorview stopanimating]; if (!error) { \[self gotomainpage]; } else { \[self displaymessagetouser\ error localizeddescription]; } }]; } 3 ออกจากระบบ การออกจากระบบจะลบวัตถุ session ที่ใช้งานอยู่สำหรับผู้ใช้ที่ล็อกอินอยู่ วิธีที่ใช้ในการออกจากระบบคือ parseuser logoutinbackgroundwithblock() ลาก uibutton ไปยัง loggedinviewcontroller ใน storyboard หลัก ตั้งชื่อปุ่มว่า ‘logout’ มันควรจะดูเหมือนแบบนี้ มาลองเพิ่มฟังก์ชัน displayerrormessage อีกครั้งเพื่อแสดงข้อความผิดพลาดจากเซิร์ฟเวอร์ เราจะใช้วิธีนี้ทุกครั้งที่เราสื่อสารกับแอป parse ของเรา \ (void)displaymessagetouser (nsstring )message { uialertcontroller alert = \[uialertcontroller alertcontrollerwithtitle @"ข้อความ" message\ message preferredstyle\ uialertcontrollerstylealert]; uipopoverpresentationcontroller poppresenter = \[alert popoverpresentationcontroller]; poppresenter sourceview = self view; uialertaction okbutton = \[uialertaction actionwithtitle @"ตกลง" style\ uialertactionstyledefault handler ^(uialertaction action) { }]; \[alert addaction\ okbutton]; poppresenter sourcerect = self view\ frame; alert modalpresentationstyle = uimodalpresentationpopover; \[self presentviewcontroller\ alert animated\ yes completion\ nil]; } 2\ มาลองเพิ่มฟังก์ชัน gotostartpage เพื่อพาเรากลับไปที่หน้าล็อกอิน/สมัครสมาชิกหลังจากที่เราล็อกเอาท์กันเถอะ \ (void)gotostartpage { nsstring storyboardname = @"main"; uistoryboard storyboard = \[uistoryboard storyboardwithname\ storyboardname bundle nil]; viewcontroller vc = \[storyboard instantiateviewcontrollerwithidentifier @"viewcontroller"]; \[self presentviewcontroller\ vc animated\ yes completion\ nil]; } 3\ สุดท้ายมาลองเพิ่ม ibaction เพื่อเรียกใช้การล็อกเอาท์และพาเรากลับไปที่หน้าลงทะเบียน/ล็อกอินใน viewcontroller m วิธีนี้จะทำการล็อกเอาท์ pfuser และพาคุณกลับไปที่หน้าลงทะเบียน เชื่อมต่อ ibaction นี้กับปุ่มล็อกเอาท์ใน loggedinviewcontroller \ (ibaction)logout (id)sender { \[activityindicatorview startanimating]; \[pfuser logoutinbackgroundwithblock ^(nserror nullable error) { \[self >activityindicatorview stopanimating]; if(error == nil){ \[self gotostartpage]; }else{ \[self displaymessagetouser\ error debugdescription]; } }]; } 4 ทดสอบแอปของคุณ เรียกใช้แอปของคุณและสร้างผู้ใช้สองสามคน ลองเข้าสู่ระบบอีกครั้งหลังจากลงทะเบียนพวกเขา เข้าสู่ระบบที่ เว็บไซต์ back4app https //www back4app com/ ค้นหาแอปของคุณและคลิกที่ \แดชบอร์ด\ > \คอร์\ > \เบราว์เซอร์\ > \ผู้ใช้\ ลองเข้าสู่ระบบและออกจากระบบด้วยผู้ใช้เดียวกันและลงชื่อเข้าใช้ใหม่ ในจุดนี้ คุณควรเห็นผู้ใช้ของคุณตามที่แสดงด้านล่าง หมายเหตุ โดยใช้รหัสที่แสดงข้างต้น ทุกครั้งที่คุณเข้าสู่ระบบด้วยผู้ใช้ จะมี \เซสชัน\ เปิดใน \แดชบอร์ด\ , แต่เมื่อผู้ใช้ออกจากระบบ \เซสชัน\ นั้นจะสิ้นสุดลง นอกจากนี้ ทุกครั้งที่มีการเข้าสู่ระบบหรือการลงทะเบียนที่ไม่สำเร็จ \เซสชัน\ ที่เปิดใน parse server \แดชบอร์ด\ จะถูกลบ เสร็จสิ้น! ในขั้นตอนนี้ คุณสามารถเข้าสู่ระบบ ลงทะเบียน หรือออกจากแอปของคุณโดยใช้ฟีเจอร์หลักของ parse server ผ่าน back4app!