next apollo auth

Auth Auth ตัวอย่างด้วย next.js และ Apollo

ตัวอย่างนี้แสดงวิธีการใช้การรับรองความถูกต้องด้วย next.js และ apollo graphQl

เทคโนโลยีหลักที่ใช้

• Apollo graphql
• Express.js
• Express Validator
• next.js
• Passport.js
• หนังสือเดินทางท้องถิ่น
• Passport-Github

สารบัญ

• โครงสร้างโครงการ
• การกลายพันธุ์
  • สคีมา
  • นักมวย
• แบบจำลอง
• ปรับใช้

โครงสร้างโครงการ

├── components
│   └── forms
│   ├── login.js
│   └── signup.js
├── lib
│   ├── initApollo.js
│   └── withData.js
├── pages
│   ├── index.js
│   ├── login.js
│   └── signup.js
└── server
├── data
│   ├── resolvers.js
│   └── schema.js
├── models
│   └── User.js
├── services
│   └── passport.js
└── index.js

การกลายพันธุ์

สคีมา

ที่นี่เรามีประเภทหนึ่งของ User ที่มีสามฟิลด์ (อีเมล, fullName และรหัสผ่าน), ประเภท Query หนึ่งประเภทพร้อมฟิลด์โปรไฟล์เพียงเพื่อให้ปากของ GraphQl ปิดเกี่ยวกับการกำหนดประเภทการสืบค้น เรามีสองประเภท Mutation (เข้าสู่ระบบและการสมัคร)

 type User {
	email: String
	fullname: String
	password: String
}

type Query {
	profile : User
}

type Mutation {
	createUser ( email : String ! , fullname : String , password : String ! ) : User
	login ( email : String ! , password : String ! ) : User
} 

นักมวย

ตัวแก้ไขที่เราใส่ใจที่นี่คือ createUser และ login พวกเขาทั้งสองใช้ email และ password เป็นอาร์กิวเมนต์ที่มี createUser ใช้อาร์กิวเมนต์ fullname พิเศษ

Mutation: {
		createUser ( root , { email , fullname , password } , { login } ) {
			const user = new User ( { email , fullname } )

			return new Promise ( ( resolve , reject ) => {
				return User . register ( user , password , err => {
					if ( err ) {
						reject ( err )
					} else {
						login ( user , ( ) => resolve ( user ) )
					}
				} )
			} )
		} ,
		login ( root , { email , password } , { login } ) {
			return new Promise ( ( resolve , reject ) => {
				return User . authenticate ( ) ( email , password , ( err , user ) => {
					// user returns false if username / email incorrect
					if ( user ) {
						login ( user , ( ) => resolve ( user ) )
					} else {
						reject ( 'Email / Password Incorrect' )
					}
				} )
			} )
		}
	}

แบบจำลอง

อ๊ะ! เรามีเพียงรุ่นเดียว (ผู้ใช้) รับอีเมลตรวจสอบอีเมลด้วย express-validator จากนั้นเรามีปลั๊กอินเพื่อบอก passport-local-mongoose ให้ใช้ฟิลด์อีเมลของเราเป็นชื่อ usernameField เริ่มต้น

 const userSchema = new Schema ( {
	email : {
		type : String ,
		unique : true ,
		lowercase : true ,
		trim : true ,
		validate : {
			isAsync : true ,
			validator : ( v , cb ) =>
				cb ( validator . isEmail ( v ) , ` ${ v } is not a valid email address` )
		} ,
		required : 'Please Supply an email address'
	} ,
	fullname : String
} )

userSchema . plugin ( passportLocalMongoose , {
	usernameField : 'email' ,
	errorMessages : {
		UserExistsError : 'Email Already Exists'
	}
} )

ปรับใช้

ใบอนุญาต

มิกซ์